Vue props父组件向子组件传值详解

vue官网上可以说有我们想要的一切，先贴上通过prop传值的官网地址：通过prop向子组件传递数据

Prop是什么？

　　Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。

　　从这句话上面我们能看出两点

　　1、prop是写在组件上的。

　　2、把父组件的一个值传给子组件时，这个值通过prop转化成了这个子组件实例的一个属性。

　　不理解第二句话没关系，看下面例子。

基础--静态传值

　　1、首先创建一个Vue实例

　　2、注册一个组件（这样注册组件的方式是全局注册），还记得我们第一句话吗？prop是在组件上的。因为可以是多个，所以是props。

　　　　在props上声明的是title，在我们的template模板中使用的都是它。

　　3、使用组件。

<script>
        //第二步： 注册一个全局组件
        Vue.component('props-component', {
            // 在这个组件上声明props
            props:['title'],
            template:`
                <div>{{title}}</div>
            `
        });
        // 第一步：声明Vue
        let vm = new Vue({
           el:'#app' 
        });
    </script>

<div id="app">
        <!-- 第三步：使用组件 -->
        <props-component title="props so easy"></props-component>
    </div>

　　这只是一个非常简单的静态传值，可在实际中我们几乎不用静态传值。

进阶--动态传值

　　我刚学习vue的时候，一直不知道props的流程到底是怎么样的，也就是我是先创建组件，还是先声明一个vue实例等等。流程很重要，

　　也可以说这种思想很重要。

　　说下我的理解：

　　1、首先我们应当知道自己创建的组件里面是什么标签啊之类的。我应用到哪个地方？具体模板应该是什么样子的？

　　　　就像我们上面例子中的这个最简单的模板。

<div>{{title}}</div>

　　2、声明组件上的props。

　　3、实例上的data值应当和props声明的值对应。

　　看下面的例子:

　　场景：我想写一个页面的header标签组件。

　第一步：

// 第一步：声明Vue
        let vm = new Vue({
           el:'#app',
           data:{
                
           }
        });

第二步：这个组件应当长什么样子？

        // 第二步：创建组件
        Vue.component('my-header', {
            props:['lists'],
            template:`
                <header>
                    <ul>
                        <li>{{lists}}</li>
                    </ul>
                </header>
            `
        })

第三步：声明headerList（其实熟练的话，这步骤完全省略了）

let vm = new Vue({
           el:'#app',
           data:{
                headerList:'首页'
           }
        });

第四步：使用组件 :lists="headerList"

　　　　lists是我们在组件中props声明的，headerList是我们在根实例中声明的属性

<my-header :lists="headerList"></my-header>

这样就是一个最简单的组件传值了。

打完收工

Vue props父组件向子组件传值详解

猜你喜欢