总体来说，Vue中组件之间的通信场景如下图：
组件通信场景
可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。
1. 自定义事件
子组件-->父组件： 采用自定义事件，子组件用$emit()来触发事件，父组件用$on()来监听子组件事件，父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件：
<!-- 自定义事件 -->
<body>
<div id="app">
<p>SUM: {{total}} </p>
<!-- 父组件用v-on监听子组件事件，做出处理 -->
<my-component
@increase = "handleGetTotal"
@reduce = "handleGetTotal"
></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
template: '<div><button @click="handleIncrease">+1</button> <button @click="handleReduce">-1</button></div>',
data: function() {
return {
counter: 0
}
},
methods: {
handleIncrease: function() {
this.counter++;
//使用$emit触发increase事件，第一个参数为自定义事件的名称，第二个参数是要传递的数据
this.$emit('increase', this.counter);
},
handleReduce: function() {
this.counter--;
this.$emit('reduce', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0,
},
methods: {
handleGetTotal: function(total) {
this.total = total;
}
}
})
</script>
</body>
执行结果
子组件有两个按钮，分别实现+1和-1的效果，在改变counter后，通过$emit()把它传递给父组件，父组件通过v-on获取并作出处理。
2. 使用v-model
Vue2.x 中也可以在自定义组件中使用v-model指令：
<!-- 自定义事件使用v-model -->
<body>
<div id="app">
<p>SUM: {{total}} </p>
<my-component v-model="total"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
template: '<div><button @click="handleIncrease">+1</button><button @click="handleReduce">-1</button></div>',
data: function() {
return {
counter: 0
}
},
methods: {
handleIncrease: function() {
this.counter++;
this.$emit('input', this.counter);
},
handleReduce: function() {
this.counter--;
this.$emit('input', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0,
},
})
</script>
</body>
所实现效果一样，但是现在子组件$emit()的事件名为特殊的input，在父组件中，直接使用了v-model绑定一个数据total。这其实是一个语法糖，其实际实现为：
<my-component @input="handleGetTatal"></my-component>
...
methods: {
handleGetTotal: function(total) {
this.total = total;
}
}
v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定。
3. 非父子组件通信--中央事件总线
在Vue 2.x中，推荐使用一个空的Vue实例作为中央事件总线（bus），直接看代码理解：
<!-- 非父子组件通信--中央事件总线 -->
<body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var bus = new Vue();
Vue.component('my-component',{
template: '<div><button @click="handleEvent"">传递事件</button></div>',
methods: {
handleEvent: function() {
bus.$emit('on-message', '来自组件my-component的内容');
},
}
});
var app = new Vue({
el: '#app',
data: {
message: '',
},
mounted: function() {
var _this = this;
//在实例初始化时，监听来自bus实例的事件
bus.$on('on-message', function(msg) {
_this.message = msg;
});
}
})
</script>
</body>
上述代码中为了方便起见，我们还是以父子组件为例的，但目的是为了理解代码中名为bus的空Vue实例。
在bus实例中，没有任何内容，实例app初始化时，会在生命周期钩子函数mounted中监听来自bus的事件on-message，而组件my-component中的按钮点击将on-message事件通过bus传递了给了app。
如果深入使用，可以扩展bus实例，为他添加data、methods、computed等选项，这些都是公用的，在实际业务中，比如用户登录的昵称、性别、邮箱等通用信息，只需要在初始化时被bus获取一次，则之后其他组件就可以直接使用了。
4. 父链 & 子组件索引
除了中央事件总线bus外，还有两种方法可以实现组件之间的通信，父链和子组件索引。
**父链 **
在子组件中，使用this.$parent可以直接访问该组件的父实例，父组件也可以通过this.$children访问它的所有子组件，从而完成递归向上或向下的访问：
<!-- 父链 -->
<body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
template: '<div><button @click="handleEvent"">通过父链直接修改父组件数据</button></div>',
methods: {
handleEvent: function() {
//访问到父链并修改其数据
this.$parent.message = '来自子组件的修改数据';
},
}
});
var app = new Vue({
el: '#app',
data: {
message: '我本来的数据',
},
})
</script>
</body>
执行结果
在业务中，应该尽可能避免子组件依赖父组件中的数据，更不应该主动修改它的数据，这不满足父子组件之间解耦的原则。
理想情况下，只有组件自己可以修改自己的状态。父子组件最好还是通过props和$emit来完成通信。
子组件索引
当子组件较多时，通过this.$children来遍历出所需要的子组件时比较困难的，因此Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称：
<!-- 子组件索引 -->
<body>
<div id="app">
<div>{{message}}</div>
<button @click="handleRef">通过ref获取子组件实例</button>
<my-component ref="myComponent"></my-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('my-component',{
data: function() {
return {
message: '子组件内容'
}
}
});
var app = new Vue({
el: '#app',
data: function() {
return {
message: ''
}
},
methods: {
handleRef: function() {
//通过$refs访问指定子组件实例
var msg = this.$refs.myComponent.message;
this.message = msg;
}
}
})
</script>
</body>
上述代码，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问到相应子组件。
$refs只在组件渲染完成后才填充，并且它时非响应式的，仅仅作为直接访问子组件的应急方案，应尽量避免使用。
参考
- 《Vue.js 实战》
网友评论