Vue组件间通信

Vue组件是Vue的一个重要组成部分，所以掌握Vue组件间的通信是十分重要的，一共分三种情况：父组件向子组件传值、 子组件向父组件传值，非父子组件传值

父组件向子组件传值

在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

父子组件通信
父组件向子组件传值，需要子组件使用props显式表明所需值

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: '<span>{{ message }}</span>'
})

然后可以传入一个普通值
<child message="hello!"></child>
这样子组件就能得到父组件传过来的值了

父组件向子组件传值成功
总结一下：
子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

子组件向父组件传值

父子组件之间是单向数据流，也就是子组件不能显式的将数据传入父组件，只能通过Event的方式
建立子组件，并在子组件的button按钮上绑定事件sendMessageToParent，在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

子组件代码
父组件在子组件上绑定一个监听事件,当子组件事件发生之后，父组件接收信息，触动事件showMessageFromChild,这样子组件的数值就传到了父组件
父组件代码 效果图

非父子组件传值

非父子组件之间的传值可以通过一个空的vue实例做中间传递,具体点击
如果是较大型项目可以采用Vuex来管理状态,前往Vuex

文章参考Vue.js官方指南