Vue组件之间通信的三种方式
最近在看梁颠编著的《vue.js实战》一书，感觉颇有收获，特此记录一些比价实用的技巧。
组件是mvvm框架的核心设计思想，将各功能点组件化更利于我们在项目中复用，这类似于我们服务端面向对象三大特性之一的封装，将复杂的会被多次调用的代码封装成组件,在需要调用的地方注册使用即可。这样设计的前端代码方便移植，可以跨项目复用。
组件之间的关系分为父子组件兄弟组件和跨多级组件等等，在组件之间交互数据，进行通信主要通过三种方式来进行：
- *事件总线（非父子组件通信）
- 父链
- 子组件索引
下面让我们来好好说道说道这三种通信方式：
一.*事件总线
这个东西名字叫的很唬人，但实际却是很好理解的一种通信方式，话不多说，我们来上代码。
<body>
<div id="app">
{{message}}
<tempcomponent-a></tempcomponent-a>
</div>
<script>
var middleware = new vue();
vue.component('tempcomponent-a', {
template: '<button @click="handleevent">传递事件</button>',
methods: {
handleevent: function () {
middleware.$emit('on-message', '来自组件tempcomponent-a的内容');
}
}
});
var app = new vue({
el: '#app',
data: {
message: ''
},
mounted: function () {
var _this = this;
middleware.$on('on-message', function (msg) {
_this.message = msg;
})
},
});
</script>
</body>
在上面的代码中，空的vue实例"middleware"就是我们的所谓的*事件总线，我们可以看到，它负责在自组件"tempcomponent-a"中发出事件，在我们的主体vue实例app中,通过监听"middleware"来获取子组件发出的内容。我的理解是*事件总线就类似我们做交换数据的时候的临时变量一样，它在中间负责处理结果，然后返回消息给请求者,它的职责就是中介。这个空的vue实例也可以加入data，methods等选项，这些都是可以作为公用的。
二.父链$parent
父链这个词就很好理解啦，顾名思义即是组件的父对象，在组件内部可以直接通过$parent对父对象进行操作
<body>
<div id="app">
{{message}}
<tempcomponent-a></tempcomponent-a>
</div>
<script>
vue.component('tempcomponent-a', {
template: '<button @click="handleevent">通过父链直接修改数据</button>',
methods: {
handleevent: function () {
this.$parent.message = '来自组件tempcomponent-a的消息';
}
}
});
var app = new vue({
el: '#app',
data: {
message: ''
}
})
</script>
</body>
通过上面的代码，我们可以看到在自组件内，使用父链$parent直接对父对象对属性操作是非常简单的。
三.子组件索引ref&$refs
子组件这个也很好理解，是在父对象上对所拥有对子组件进行操作，一般来说父容器内对子组件会有多个，所以每个组件需要设置特殊属性ref来为自身指定一个唯一名称。
<body>
<div id="app">
<button @click="handleref">通过ref获取子组件实例</button>
<tempcomponent-a ref="coma"></tempcomponent-a>
</div>
<script>
vue.component('tempcomponent-a', {
template: '<div>子组件</div>',
data: function () {
return {
message: '子组件内容'
}
}
});
var app = new vue({
el: '#app',
methods: {
handleref: function () {
var msg = this.$refs.coma.message;
console.log(msg);
}
}
})
</script>
</body>
从代码可以看出，当我们直接在组件上创建ref属性，在父对象中想对子组件进行操作，直接通过$refs.加上该组件唯一对ref属性即可访问。注意$refs是子组件渲染完成之后才填充对，而且不是响应式，应避免在计算属性和模版中使用$refs
上一篇： 20 个让你效率更高的 CSS 代码技巧
下一篇： Go基础编程实践（六）—— 文件