常见父子组件的数据传递
父组件通过props方式向子组件传递数据，而子组件通过$emit的事件方式对父组件传递数据
父组件 -> props -> 子组件 子组件 -> $emit -> 父组件
Vue官方对于vue框架的定义是轻量级的视图层框架，当项目中出现很复杂的数据传递时（主要在于同级组件之间需要进行数据传递的话，如果单纯地靠一层层的传递，可能会让项目变得更加复杂），所以单纯依靠Vue框架是解决不了复杂的数据传递的，此时我们需要引入一些工具或者设计模式来解决vue之中组件之间复杂的数据传递。
两种方案
- 数据层的框架——Vuex
- 发布订阅模式（又称为：总线机制/Bus/观察者模式）
总线机制 Bus:
需求: 点击组件A 会改变组件B的内容，且显示组件A的内容， 点击组件B 会改变组件A的内容，且显示组件B的内容。 实现两个同级组件之间的数据传递？
<!DOCTYPE html>
<html>
<head>
<title>组件</title>
<script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
<div id="app">
<child content="chonglou"></child>
<child content="hello world"></child>
</div>
<script type="text/javascript">
//添加总线机制
Vue.prototype.bus = new Vue();
Vue.component('child', {
props: ["content"],
template: '<div @click="handleClickEvent">{{message}}</div>',
data() {
return {
message: this.content
}
},
//挂载时调用
mounted(){
var that = this;
this.bus.$on('change',function(res){ //对事件进行监听
that.message = res;
})
},
methods: {
handleClickEvent: function() {
this.bus.$emit('change',this.message)
}
},
})
var vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
解析:
1. 总线机制也属于单向数据流，A,B都会监听同一个事件响应，所以只会被修改一次。
2. Vue.prototype.bus = new Vue(); 在prototype上挂载了一个全局bus属性，该bus属性指定一个vue实例。 在之后，只要调用 new.Vue 或者创建组件时，每个组件上都会有 bus 这个属性，而在Vue的 prototype 挂载一个 bus 的属性，都指向同一个 Vue 的实例
3. this.bus.$emit('change', this.content) ，this.bus等同于Vue.prototype.bus = new Vue () 上挂载的 bus ，同时 bus 作为Vue实例，具备使用‘$emit’，并且向外触发事件的同时携带要传递的数据内容
4. 向外触发事件之后，其他组件将通过'$on'监听的方式接收数据 方式：借助生命周期钩子'mounted'
