03_组件通信

组件通信

组件之间的关系

• 父子关系
• 非父子关系

组件通信-父子通信

父子通信，利用在父组件模板中，给子组件添加属性的方法进行通信，一旦添加了属性，那么在子组件中可以通过props进行接收

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

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

子组件

{
  props: {
    msg: String
  }
}

组件通信-子父通信

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

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

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

父组件

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

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

组件通信-非父子通信

非父子通信需要借助一个公共的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就是传递的数据
    })
  }
}