Vue 组件通信

组件通信

组件关系

在Vue中组件关系比较单纯，只有两种关系

• 父子关系
• 非父子关系

只要不是父子关系，就是非父子关系

组件通信

组件通信有三种情况

• 父子通信 父组件中的数组传递到子组件中（常用）
• 子父通信 子组件中相关操作修改父组件中的数据(常用)
• 非父子通信 非父子组件关系中组件A要把数据传递到组件B中

自定义事件

自定义事件是子父通信和非父子通信的基石。我们必须了解自定义事件才能完成子父和非父子通信

$emit

触发自定义事件

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

$on

监听自定义事件，事件触发后想要执行相关操作，一定注意！！！！！！先监听再触发

this.$on('自定义事件名', (data) => {
  // 这个data就是$emit时，传递过来的数据
})

注意！！！！

this.$emit和this.$on的this必须是同一个实例对象，组件中的this及new Vue都包含$emit和$on

非父子组件通信

非父子组件通信利用了自定义事件，但是因为组件不同，所以需要单独创建一个公共的vue实例来调用$emit和$on

bus

const bus = new Vue()

Component1

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

  methods: {
    clickHandler () {
      bus.$emit('自定义事件名', "从component1中传递的数据")
    }
  }
}

Component2

const Component2 = {
  template: `
    <div>
      {{msg}}
    </div>
  `,

  data () {
    return {
      msg: "这是component2的数据"
    }
  },

  created () {
    bus.$on('自定义事件名', (data) => {
      this.msg = data
    })
  }
}

子父通信

子父通信同样借助自定义事件，但是监听写法稍有不同

Parent

const Parent = {
  template: `
    <div>
      {{msg}}
      <!-- 监听操作应该写在组件标签上 -->
      <Child @自定义事件名="fn"></Child>
    </div>
  `,
  
  methods: {
    fn (data) {
      // data就是子组件中传递来的数据
      this.msg = data
    }
  },

  data () {
    return {
      msg: "父组件中的数据"
    }
  }
}

Child

const Child = {
  template:`
    <div>
      <button @click="clickHandler">点击按钮将parent中的msg修改</button>
    </div>
  `,

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

以后，看到组件标签上绑定的有事件，甭管什么事件，他都是自定义事件

父子通信

父子通信，说白了就是给组件标签上添加属性，然后在子组件中通过设置pros接收

Parent

const Parent = {
  template: `
    <div>
      <Child msg="这是父组件中传递的数据" :num="num"></Child>
    </div>
  `,

  data () {
    return {
      num: 1
    }
  }
}

Child

const Child = {
  template: `
    <div>
      <!-- 像使用data一样使用prop -->
      {{msg}} - {{num}}
    </div>
  `,

  props: {
    msg: String,
    num: Number
  }
}

!!!props不能直接修改，如果想要修改对应的数据，要找到数据源头进行修改