VUE组件间的通信
前言
一般来说，组件可以有以下几种关系：
#1.父子组件之间的通信
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
#1.1 父组件到子组件使用props传递数据
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '{{ message }}'
})
父组件中使用子组件并传值给子组件：
单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。 另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
注意：JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
#1.2 子组件到父组件使用自定义事件
-
使用 $on(eventName) 监听事件
-
使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。然后再对应子组件方法执行处触发事件，两者缺一不可。
// 子组件
Vue.component('mycon', {
template: '',
methods: {
// 按钮点击时候触发事件
son_method: function () {
this.counter += 1;
console.log("son");
// 这句话来触发事件
// 必须跟模板中的v-on配合使用
this.$emit('son_method');
}
},
});
// 父组件
new Vue({
el: "#app",
methods: {
father_method: function () {
console.log("father");
}
}
});
#1.3 provide/inject
一句话概括：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。
// Parent.vue
export default {
provide: {
name: 'hello,chrischeng!'
}
}
// Child.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // hello,chrischeng!
}
}
需要注意的是：provide 和 inject 绑定并不是可响应的。不过，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 所以，上面 Parent.vue 的 name 如果改变了，Child.vue 的 this.name 是不会改变的，仍然是 hello,chrischeng! 。
#1.4 $parent / $children与 ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例
// Child.vue
export default {
data () {
return {
title: 'Vue.js'
}
},
methods: {
sayHello () {
window.alert('Hello');
}
}
}
// Parent.vue
#2 非父子组件之间的通信 Event Bus
在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()
// 触发组件 A 中的事件(发布消息)
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件（订阅消息）
bus.$on('id-selected', function (id) {
// ...
})
#3 状态管理（vuex).
vue的具体原理和使用方法参照官方文档就可以了； vuex
当你需要开发的系统比较小型的，vuex用不用都行；但是，一旦你的项目规模比较大，这里强烈推荐使用vuex
需要注意的是： vuex使用要合理，要避免滥用，造成一些不必要的麻烦