Write the Code. Change the World.

9月 23

在常规情况下,去定义组件的时候,只需要用到父子组件通讯即可。这样比较好实现。有时候,也会用到任意组件间的通讯,这个时候自定义组件的方式就有用了。不弄那么多,只弄一个。

先看常见父子通讯

# 使用组件的地方
<sky @changeColor="changeColor" />

methods: {
    changeColor(value) {

    }
}
# 组件内部,仅此而已。子组件中的数据,就可以被父组件收到了
this.$emit('changeColor', 'blue')

全局任意组件通讯

  1. 我们先定义一个中间的 bus

eventBus.js

import Vue from 'vue'

export default new Vue()
  1. 通常事件,事件是有一个地方发送,一个地方接受。我们再定义一个事件接受的地方。不过,要记得释放哟。可以在 mounted 的时候添加,beforeDestroy 的时候释放掉

xxx1.vue

import eventBus from '../utils/eventBus.js'

export default {
  data() {
    return {
      name: 'hello world'
    }
  },
  watch: {

  },
  mounted() {
    eventBus.$on('message', this.message)
  },
  beforeDestroy() {
    eventBus.$off('message', this.message)
  },
  methods: {
    message(value) {
        console.log('message = ', value)
    }
  }
  1. 我们再定义一个发送事件的地方

xxx2.vue

import eventBus from '../utils/eventBus.js'

# 发送吧
eventBus.$emit('message', 'hello world')

最后啰嗦一下

兄弟组件之间,也可以用自定义事件的方式来通讯。既然是兄弟,那他们肯定有相同的父组件。以父组件为 dispatcher 来整不就可以了。

# 兄弟一收
this.$parent.$on('message', res => { console.log('res = ', res) })

# 兄弟二发
$this.$parent.$emit('message', 'hello world')

发表评论

电子邮件地址不会被公开。 必填项已用*标注