Vueprops父组件向子组件传值详解

vue官⽹上可以说有我们想要的⼀切，先贴上通过prop传值的官⽹地址：

Prop是什么？

　　Prop是你可以在组件上注册的⼀些⾃定义特性。当⼀个值传递给⼀个prop特性的时候，它就变成了那个组件实例的⼀个属性。　　从这句话上⾯我们能看出两点　　1、prop是写在组件上的。

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

　　不理解第⼆句话没关系，看下⾯例⼦。

基础--静态传值

　　1、⾸先创建⼀个Vue实例

　　2、注册⼀个组件（这样注册组件的⽅式是全局注册），还记得我们第⼀句话吗？prop是在组件上的。因为可以是多个，所以是props。　　　　在props上声明的是title，在我们的template模板中使⽤的都是它。　　3、使⽤组件。

　　这只是⼀个⾮常简单的静态传值，可在实际中我们⼏乎不⽤静态传值。

进阶--动态传值

　　我刚学习vue的时候，⼀直不知道props的流程到底是怎么样的，也就是我是先创建组件，还是先声明⼀个vue实例等等。流程很重要，　　也可以说这种思想很重要。　　说下我的理解：

　　1、⾸先我们应当知道⾃⼰创建的组件⾥⾯是什么标签啊之类的。我应⽤到哪个地⽅？具体模板应该是什么样⼦的？　　　　就像我们上⾯例⼦中的这个最简单的模板。

　　2、声明组件上的props。

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

　　看下⾯的例⼦:

　　场景：我想写⼀个页⾯的header标签组件。　　　第⼀步：

// 第⼀步：声明Vue

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

第⼆步：这个组件应当长什么样⼦？

// 第⼆步：创建组件

Vue.component('my-header', { props:['lists'], template:`

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

let vm = new Vue({ el:'#app', data:{

headerList:'⾸页' } });

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

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

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

打完收⼯