vue组件间的通讯

父子组件之间的传值

  子组件向父组件传值时，在子组件内部添加事件，当事件触发时进行数据操做，在事件处理函数中经过$emit触发父组件的自定义事件，实质上是子组件的事件触发后会触发父组件的自定义件，父组件能够在使用子组件的地方直接用 v-on 来监听子组件触发的事件。父组件向子组件传值利用props自定义一个属性，将须要传递的数据赋值给该属性，子组件就能够接收到数据。
总结：父子组件之间的传值都是经过对一个媒介，父传子是经过子组件定义的属性，子传父是经过父组件的自定义事件

<div id="app">
      <p>{{ sum }}</p>
      <button-counter :title='msg' @add='changeSum'></button-counter>
      <button-counter @add='changeSum'></button-counter>
    </div>

Vue.component ('button-counter', {
      template: `<button @click='clickHandel'>{{ this.count }}</button>`,
      data () {
        return {
          count: 0
        }
        props: ['title']
      },
      methods: {
        clickHandel () {
          this.count ++,
          this.$emit('add')
            console.log(this.title)
        }
      }
    })
      new Vue ({
        el: '#app',
        data () {
          return {
            sum: 0
          }
        },
        methods: {
          changeSum () {
            this.sum ++
          }
        }
      })

非父子组件之间的传值（在一个组件中经过$on监听一个自定义事件，在另外一个组件中经过$emit 触发该自定义事件，并传递参数数据）在简单的场景下，可使用一个空的 Vue 实例做为事件总线：

// bus.js
import Vue from 'vue'
var bus = new Vue()
export default bus
// module.exports = bus

两个非父子组件

// A
<template>
    <div>
        <button @click="sendToB">toB</button>
    </div>
</template>

<script>
import Bus from './bus'
export default {
    methods:{
        sendToB: function () {
            Bus.$emit('toBFlag','hello')
        }
    }

}
</script>

<style>

</style>

// B
<template>
  
</template>

<script>
import Bus from './bus'
export default {
  created: function () {
      Bus.$on('toBFlag',function (data) {
          console.log(data)
      })
  }
}
</script>

<style>

</style>