Vue 组件（二）：父子组件通信
子组件是不能直接访问父组件中的数据的，但有时候父子组件之间需要进行数据交互，这就涉及到了父子组件通信的问题。简单来说，父组件向子组件通信是通过 props 进行的，而子组件向父组件通信则是通过自定义事件进行的。
我们用一个简易的 todolist 案例来理解这两个过程。
1.todolist 案例
1.1 父传子
假定我们现在有一个需求：在输入框中输入待办事项，点击添加按钮可以将事项展现在页面上。如下图所示：
分析：页面分为两个部分，一部分是操作区，一部分是展示区。展示区可以用 li，那么这些 li 就可以看作是可复用的子组件，而其它部分则看作是父组件，我们在父组件中操作，结果却是在子组件中显示的，所以这里是父组件向子组件通信的问题。
首先将根实例作为父组件，然后注册一个子组件，写好大概的结构：
<!--父组件模板-->
<div id="app">
<input type="text" v-model="newvalue">
<button @click="addItem">点击添加</button>
<cpn></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<ul></ul>
</div>
</template>const cpn = {
template:"#cpn"
}
const app = new Vue({
el:'#app',
data:{
newvalue:'',
list:[]
},
methods:{
addItem(){
this.list.push(this.newvalue);
this.newvalue = ''
}
},
components:{
cpn
}
})表单元素需要双向数据绑定，所以我们这里使用 v-model="newvalue"，newvalue 初始化的时候是空字符串，后面就代表我们输入的待办事项，监听按钮的点击事件并把它 push 到空数组中，之后为了用户操作方便（不需要手动删除输入框内容），我们再把 newvalue 置空。这时候，父组件的操作已经完成了，接下来要把数据传递给子组件并显示出来。
list 是要传递的数据，首先把它交付给自定义属性 list2，对于子组件，它需要通过 props （可以是数组或者对象）去接收。之后，我们在子组件模板中进行列表的遍历，遍历的对象就是 list2 数组。
代码如下：
<!--父组件模板-->
<div id="app">
<input type="text" v-model="newvalue">
<button @click="addItem">点击添加</button>
<cpn v-bind:list2="list"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<ul>
<li v-for="(item,index) in list2">{{item}}</li>
</ul>
</div>
</template>const cpn = {
template:"#cpn",
props:["list2"]
}
const app = new Vue({
el:'#app',
data:{
newvalue:'',
list:[]
},
methods:{
addItem(){
this.list.push(this.newvalue);
this.newvalue = ''
}
},
components:{
cpn
}
})每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
1.2 子传父
作为一个 todolist，除了添加之外应该还可以删除，所以接下来的需求是点击待办事项可以进行删除。如下图所示：
分析：因为这里子组件只负责点击操作，实际的删除需要父组件自己去操作数据（类似于子组件打个电话告诉父组件该删除哪个东西了），所以这里涉及到了子组件向父组件通信的问题。
这里首先还是监听待办事项的点击事件，点击后调用函数，之后执行函数中的 this.$emit('eventName',args)，作用是由实例向外触发一个自定义事件（参数可选），之后父组件再监听这个自定义事件，一旦监听到事件就调用父组件（即根实例）下挂载的方法，来删除待办事项。
代码如下：
<div id="app">
<input type="text" v-model="newvalue">
<button @click="addItem">点击添加</button>
<!-- 3.父组件监听到自定义事件 receive 后，调用 deleteItem -->
<cpn v-bind:list2="list" @receive="deleteItem"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<!--1.监听点击事件-->
<li v-for="(item,index) in list2" @click="remove(index)">
{{item}}
</li>
</ul>
</div>
</template>const cpn = {
template:"#cpn",
props:["list2"],
methods:{
remove(index){
this.$emit("receive",index) // 2.向外触发自定义事件 receive
}
}
}
const app = new Vue({
el:'#app',
data:{
newvalue:'',
list:[]
},
methods:{
addItem(){
this.list.push(this.newvalue);
this.newvalue = ''
},
// 4.执行 deleteItem 删除数组元素
deleteItem(index){
this.list.splice(index,1)
}
},
components:{
cpn
}
})2. props
前面使用的 props 是数组，实际开发中用的更多的其实是对象。作为对象的 props 可以配置高级选项，如类型检测、自定义校验和设置默认值等。
假定上面的子组件还接受了其它数据：
const cpn = {
template:"#cpn",
methods:{
.......
},
props:{
propA:Array, // 接受的 propA 类型必须是数组。也可以指定自定义类型
propB:{String,Number}, // propB 必须是字符串或者数字
propC:{
type:String,
required:true // 必须接受 propC，否则报错
},
propD:{
type:String,
default:"demo" // 没有接受到 propD 时使用这个默认值
},
propD:{
type:Object,
default:function(){ // 数组或对象指定默认值时必须是一个函数
return {message:"Hello"}
}
},
propE:{
validator(value){
// 这个值必须匹配下列字符串中的一个
return {'aaa','bbb'}.indexOf(value) !== -1
}
}
}
}另外，还要注意一下 prop 的命名。引用官方文档的一段话：
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
Vue.component('blog-post', {
props: ['postTitle'], // 在 JavaScript 中是 camelCase 的
template: '<h3>{{ postTitle }}</h3>'
})<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>重申一次，如果你使用字符串模板，那么这个限制就不存在了。
3. 在组件中使用 v-model
3.1 一般情况
首先要弄清楚一件事：v-model 其实是语法糖，本质上是 v-bind:value 和 v-on:input 的结合，也就是说：
<input type="text" v-model="test">
// 等同于
<input type="text" :value="test" @input="test=$event.target.value">根据这点，v-model 除了实现双向数据绑定之外，也可以用在组件中，更方便地书写父子组件通信。
假如我们现在想要实现：点击父组件按钮，数据 +1；反过来，点击子组件按钮，数据 -1。 代码如下：
<div id="app">
<cpn v-model="total"></cpn>
<button @click="increase">+</button>
</div>
<template id="cpn">
<div>
<h2>{{value}}</h2>
<button @click="decrease">-</button>
</div>
</template>const cpn = {
template:"#cpn",
props:["value"],
methods: {
decrease(){
this.$emit("input", this.value-1)
}
}
}
const app = new Vue({
el:'#app',
data:{
total:0
},
methods: {
increase() {
this.total++
}
},
components:{
cpn
}
})前面我们说过，v-model 是语法糖，因此：
<cpn v-model="total"></cpn>
<!--相当于下面的-->
<cpn :value="total" @input="total=arguments[0]"></cpn>分析：
我们把父组件数据直接绑定到 value 上（而不是自定义属性），之后子组件用 prop 接受。点击 -1 按钮后向外触发 input 事件（而不是自定义事件），同时传 -1 后的值，父组件监听到事件后调用函数完成赋值。
这里 arguments[0] 就是回调函数第一个参数，也就是前面 -1 后的值。
3.2 model 选项自定义
不过，组件的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能不需要 value，需要的是 checked；不需要 oninput 事件，需要的是 onchange 事件。所以 Vue 提供了 model 选项让我们实现自定义：
假定父组件有一个数据 lovingVue 用于表示子组件的多选框是否勾选，那么可以这么写：
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})其中：
<base-checkbox v-model="lovingVue"></base-checkbox>
<!--相当于下面的-->
<base-checkbox :checked="lovingVue" @change="lovingVue=arguments[0]">
</base-checkbox>这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 将会被更新。
注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。
Tip：
上面这样写之后，看起来很像是子组件可以直接修改父组件数据，其实不是的，本质上还是 prop + $emit 的正常通信方式在，只是书写更加方便了而已。
要记住 Vue 是单向数据流的。所以上面这个例子，如果 this.value-1 写成 this.value-- ，实际上会报错，因为这样写是试图通过子组件直接修改 prop 的值，这是不允许的。详情可以看 Vue 组件（三）：关于单向数据流的简单理解。
4. 总结
到这里的话，父子组件之间的通信就已经结束了。使用 Vue 的时候应该避免直接去操作 dom，而是通过数据的改变让页面自动变化。
- 父组件向子组件传值：在父组件中通过
v-on绑定自定义属性以存储父组件数据，然后子组件通过props接收，这样就可以拿到父组件中的数据； - 子组件向父组件通信：子组件监听到事件后，通过
$emit向外触发自定义事件，父组件监听到该事件后操作数据。
另外还要注意 v-model` 在组件中的使用。
参考： Vue.js中的组件以及父子组件间通信传值 Vue 进阶教程之：详解 v-model Vue.js - 自定义事件