vue中组件通信

1 父子通信

• 父组件模板在使用子组件标签时，在子组件标签上添加属性xxx，然后把自己的数据作为属性值添加上去
• 子组件中通过props去接受到对应的属性，然后把它当做data使用即可
• vue-cli写法

<template>
  <div>
    {{msg}}
    <Child :msg="msg"></Child>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: '父组件中的msg'
      }
    }
  }
</script>

子组件

{
  props: {
    msg: String
  }
}

2 子父通信

我们需要借助于原生事件去触发自定义事件（在子组件中触发），在父组件模板中找到子组件标签，并且监听该自定义事件，那么事件执行的函数中会有一个参数，这个参数就是触发自定义事件的携带的数据
子组件

const child = {
  template: `
    <div>
      <button @click="clickHandler">点击传递数据</button>
    </div>
  `,

  methods: {
    clickHandler () {
      this.$emit('自定义事件名', 要传递的数据)
    }
  } 
}

父组件

const parent = {
  template: `
    <div>
      <child @自定义事件名="要执行的函数"></child>
    </div>
  `,

  methods: {
    要执行的函数 (param) {
      // 这个参数就是$emit时传递的数据
    }
  }
}

3 非父子通信

非父子通信需要借助一个公共的vue实例（事件总线）

bus

const bus = new Vue()

组件1

const com1 = {
  template: `
    <div>
      <button @click="clickHandler"></button>
    </div>
  `,
  methods: {
    clickHandler () {
      bus.$emit('自定义事件名', 数据)
    }
  }
}

组件2

const com2 = {
  template: `
    <div>
      
    </div>
  `,
  created () {
    bus.$on('自定义事件名', (data) => {
      // data就是传递的数据
    })
  }
}