组件组合
父子组件的通信
组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。
首先，需要在Vue实例里定义一个组件，设置data，然后在这个组件里再添加一个conponents选项，注意不要添错位置。
示例:
<div id="app"> <my-father></my-father></div>//父组件的模板<template id="fatherTl"> <div> <p>这是父组件</p> <p>访问父组件数据:{{name}},{{age}},姓名:{{user.name}},年龄:{{user.age}}</p> <my-child></my-child> </div></template>//子组件的模板<template id="childTl"> <div> <p>这是子组件</p> <p>访问子组件数据:性别:{{sex}},身高:{{height}}</p> </div></template>var vm = new Vue({ el:'#app', components:{ 'my-father':{ template:'#fatherTl', data:function(){ return { name:'Xiao', age:19, user:{name:'小幂幂',age:31} } }, components:{ 'my-child':{ template:'#childTl', data:function(){ return { height:166, sex:'Female' } } } } } }});作为子组件my-child，<my-child></my-child>标签应放在父组件标签<my-father></my-father>标签内，而不能是实例挂载元素下。
如果你尝试直接在父组件模板或子组件模板中通过{{}}模板语法引用则会出现错误。
运行此案例，完美运行,你可以通过vue-devtool查看组件结构图。
目前还没有通信，只是显示了一下各自的数据，接下来传递数据了。
父向子传递数据
父向子传递数据，我们需要做的就是将要传递的数据绑定到子组件的标签上，并在子组件内通过props选项来接收。
//father模板中添加<my-child :childName="user.name" :age="user.age"></my-child>//接着，在my-child组件中添加选项props:['childName','age']//最后，我们引用name和age//my-child模板中<div> <p>这是子组件</p> <p>访问子组件数据:性别:{{sex}},身高:{{height}}</p> <p>访问父组件数据:{{childName}},{{age}}</p>//添加了这一条</div>接下来访问，即可看到数据显示了。
分析一下,：name和：age，这个冒号“：”后的name和age，就是，props中接收的属性名，将作为子组件的属性名，就是说这两个名可以改，无论改成什么，最后都需要通过这个名字访问。
而属性值就是引号中的user.name,user.age，它直接也是父组件的属性名。
子向父传递数据
子向父传递书序需要通过事件的方式向上传递数据。要做的就是通过$emit方法触发事件，并添加附加参数(就是属性)，通过事件传递数据,父组件中的事件方法接收这参数即可。
示例:
//my-child模板中定义一个按钮，作为媒介，用来触发<button @click="send">向上传递给父组件数据</button>//组组件定义methods:{ send(){ this.$emit('child-up',this.sex,this.height); }}//my-father组件模板中监听这个事件<my-child :name="user.name" :age="user.age" @child-up="getData"></my-child>//所以你需要在my-father组件中定义这个getData方法来接收//但你需注意，你必须提前初始化这些属性methods:{ getData(sex,height){ this.sex=sex; this.height=height; }}//myfather模板中<h3>访问子组件数据,{{sex}},{{height}}</h3>这样，通过某个媒介(点击或其他方式)作为触发事件的方式，来传递数据，并在该实例处监听该事件，并接收数据。
此处将监听在my-child标签中，因my-chlid标签作为myfather标签的子组件，所以将getData方法定义在父组件methods中。
单向数据流
props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
接下来我们想试着修改父组件内属性的值，看看是不是会跟着修改,且如果修改prop中属性是否会出现错误。
示例:
代码较多，我们再新建一个html。我们只注册使用一个组件，因为Vue实例本身也是一个组件，它是根组件，所以在实例中components中注册一个组件作为子组件。
<div id="app"> <p>父组件:{{age}}</p> <p><input type="text" v-model="name"></p> <hr/> <my-component :username="name" :age="age"></my-component></div><template id="templ"> <p>子组件中父组件的数据,{{username}}</p></template>var vm = new Vue({ el:'#app', data:{ name:'XiaoYao', age:19 }, components:{ 'my-component':{ template:'#templ', props:['username','age'] } }});我们已经通过props属性进行向下传递数据了，父组件中我们把name属性设置为双向绑定的属性，以便于修改。
接下来直接在文本框中修改name的值，子组件模板中，值就跟着变了。
那么，我们开始尝试着修改它。
示例:
//在组件模板中添加如下按钮。注意模板中只有一个根元素，需要div包起来<button @click="change">直接修改父组件传递下来的值</button>//在子组件中定义方法，注意不要写错位置，会发生错误的methods:{ change(){ this.username='I Love You';//直接修改它的值 }}运行结果，浏览器控制台发生异常了。
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "username"
由此可见，它是不可以更改的，因为它是自动更新值的。
如果你很需要在子组件中修改它的话
当然如果非要这么做的话，也还是有方法的，因为你很有必要用它。
你可能希望把它当做局部变量处理
你可能需要得到它的值显示出来，并修改它
那么你有两种选择，
一种是定义局部变量，来操作它。
另一种就是定义计算属性，依据原值的修改来动态的改变这个计算属性，而你使用的就是这个计算属性
接下来我们只需要这样：
//1.添加属性，并将传来的属性复制给新的局部定义属性data:function(){ return { myName:this.username }}//2.接下来要改变和使用的值就都是myName了methods:{ change(){ this.myName='I Love you' }}//模板中<p>子组件中父组件的数据,{{myName}}</p>对于使用计算属性，我们可以做:
props: ['size'],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}//接下来就是使用normalizedSize属性显示了以上是单项数据流的问题，如果需要双向呢，看下面。
双向数据流，父子双向绑定
我们使用.sync修饰符,该修饰符在1.0中使用，在2.0中废除，后又在2.3中重新引用，只是错了稍加修改，具体情况看官网。
//父组件向下传递时，子组件标签上传递的属性后面添加.sync修饰符<my-component :username.sync="name" :age="age"></my-component>
然后需要显式的触发一个更新事件。
methods:{ change(){ this.$emit('update:username', 'I Love You'); //this.username='I Love you'; }}通过$emit事件方法，然后第一个参数，update：是固定写法，后面是新属性值，这样就可以双向绑定了。使用按钮触发不是必需的，只要在某处调用这个触发方法即可。
假如你向下传递的是对象，那么如果要修改的话会更方便。
我们可以直接修改对象的属性值而不需要.sync修饰符。
//为父组件定义一个对象,并且显示他emp:{salary:6000,workingAge:2,name:'XiaoChenchen'}<p>父组件emp:{{emp}}</p>//在单击按钮方法中直接设置对象的属性值this.emp.salary=8000;单击按钮，发现salarys从6000变成了8000，而且不会不会发生任何错误。
这是因为对象的引用地址没有发生改变，改变的只是里面的属性，属性改变并不会影响对象地址。
所以我们建议封装成对象更方便，但有时也是需要到.sync修饰符的，主要是看情况了。
谢谢观看，下节继续讲组件，非父子间通信，以及slot插槽分发。
爱自己，更爱需要爱的人。。。
随时随地看视频
