vue中的组件通信

vue中组件通信方法有很多种，可以根据具体场景来选择具体使用哪种。比较常见的以下几种方法：

1、父组件向子组件传参

在父组件中向子组件传入普通字符串：

<Child message="hello vue"></Child>

在子组件中用props接受传进来的参数：

props: {
  message: ''
}

完整代码：

// 父组件
<template>
  <div id="example">
    <Child message="hello vue"></Child>
  </div>
</template>
<script type="text/javascript">
import Child from './Child';

export default {
  components: {
    Child
  }
}
</script>

// 子组件
<template>
  <div id="child">
    <span>{{ message }}</span>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    message: ''
  }
}
</script>

2、子组件向父组件传参

props传递参数时是单向的，这意味着我们不能通过props向父组件传递参数。我们可以在子组件中发送事件，在父组件中监听事件来实现子组件向父组件传参。
子组件使用emit发送事件：

this.$emit('listenFromChildData', 'this message is from child')

父组件监听事件：

<Child @listenFromChildData="childData"></Child>

完整代码：

// 父组件
<template>
  <div id="example">
    <span>{{text}}</span>
    <Child @listenFromChildData="childData"></Child>
  </div>
</template>
<script type="text/javascript">
import Child from './Child';

export default {
  data: function() {
    return {
      text: ''
    }
  },
  methods: {
    childData(data) {
      this.text = data
    }
  },
  components: {
    Child
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="sendMsgToParent">向父组件传值</button>
  </div>
</template>
<script type="text/javascript">
export default {
  methods: {
    sendMsgToParent() {
      // 发送数据
      this.$emit('listenFromChildData', 'this message is from child')
    }
  }
}
</script>

3、非父子组件通信

非父子组件之间通信时，简单的情况下，可以使用事件总线。
首先定义一个空的Vue实例作为事件总线：

let bus = new Vue()

在A组件中使用emit发送事件：

bus.$emit('event', data)

在B组件中使用on监听事件：

bus.$on('event', function (data) {
    // todo ...
})

完整代码：

// 组件A
<template>
  <div>
    <span>组件A</span>
    <button v-on:click="add"> {{text}} </button>
  </div>
</template>
<script type="text/javascript">
import bus from '../bus.js'
export default {
  data: function() {
    return {
      text: '发送数据',
      data: ''
    }
  },
  methods: {
    add() {
        bus.$emit('sendDataToB', 'this data from A')
    }
  }
}
</script>

// 组件B
<template>
  <div>
    <span>组件B</span>
    <span>{{data}}</span>
  </div>
</template>
<script type="text/javascript">
import bus from '../bus.js'
export default {
  data: function() {
    return {
      data: ''
    }
  },
  mounted() {
    var self = this
    bus.$on('sendDataToB', function (msg) {
      self.data = msg
    })
  }
}
</script>

4、vuex

在复杂情况下，组件间通信可以使用vuex，vuex的官方文档