巧妙运用事件总线，实现Vue.js子组件与父组件的流畅对话

2023-10-11 06:11:18

在Vue.js的组件化开发中，子组件与父组件之间的通信是至关重要的。子组件需要将数据和事件传递给父组件，而父组件也需要将数据和事件传递给子组件。在Vue.js中，有两种主要的方式来实现子组件与父组件之间的通信：

道具（props） ：道具允许父组件向子组件传递数据。道具是只读的，子组件无法修改道具的值。
事件（events） ：事件允许子组件向父组件发送事件。父组件可以监听子组件发出的事件，并在事件发生时执行相应的操作。

子组件向父组件通信

子组件向父组件通信最常用的方法是使用事件。子组件可以通过$emit()方法来触发一个事件，父组件可以通过v-on指令来监听子组件发出的事件。

以下是一个子组件向父组件通信的示例：

// 子组件
export default {
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}

// 父组件
export default {
  methods: {
    handleClick() {
      console.log('子组件发出了click事件');
    }
  }
}

在上面的示例中，子组件通过$emit()方法触发了一个名为click的事件，父组件通过v-on指令监听了子组件发出的click事件，并在事件发生时执行了handleClick()方法。

父组件向子组件通信

父组件向子组件通信最常用的方法是使用道具。父组件可以通过props选项来向子组件传递数据。子组件可以通过props属性来访问父组件传递的数据。

以下是一个父组件向子组件通信的示例：

// 父组件
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  props: {
    message: String
  }
}

// 子组件
export default {
  props: ['message'],
  template: `<p>{{ message }}</p>`
}

在上面的示例中，父组件通过props选项向子组件传递了一个名为message的道具。子组件可以通过props属性来访问父组件传递的message数据，并在模板中使用它。

事件总线

事件总线是一种实现组件间通信的简单而强大的方式。事件总线本质上是一个全局对象，用于在组件之间传递事件。组件可以通过事件总线触发和监听事件，从而实现通信。

以下是如何使用事件总线实现子组件向父组件通信的示例：

// 子组件
export default {
  methods: {
    handleClick() {
      this.$root.$emit('click');
    }
  }
}

// 父组件
export default {
  methods: {
    handleClick() {
      console.log('子组件发出了click事件');
    }
  },
  mounted() {
    this.$root.$on('click', this.handleClick);
  },
  beforeDestroy() {
    this.$root.$off('click', this.handleClick);
  }
}

在上面的示例中，子组件通过$root.$emit()方法触发了一个名为click的事件，父组件通过$root.$on()方法监听了子组件发出的click事件，并在事件发生时执行了handleClick()方法。

需要注意的是，在组件销毁之前，需要调用$root.$off()方法来移除对事件的监听，以防止内存泄漏。

事件总线也可以用于实现父组件向子组件通信。以下是如何使用事件总线实现父组件向子组件通信的示例：

// 父组件
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    handleClick() {
      this.$root.$emit('update-message', this.message);
    }
  }
}

// 子组件
export default {
  props: ['message'],
  template: `<p>{{ message }}</p>`,
  mounted() {
    this.$root.$on('update-message', this.updateMessage);
  },
  beforeDestroy() {
    this.$root.$off('update-message', this.updateMessage);
  },
  methods: {
    updateMessage(message) {
      this.message = message;
    }
  }
}

在上面的示例中，父组件通过$root.$emit()方法触发了一个名为update-message的事件，子组件通过$root.$on()方法监听了父组件发出的update-message事件，并在事件发生时执行了updateMessage()方法，从而更新了子组件中的message数据。

需要注意的是，在组件销毁之前，需要调用$root.$off()方法来移除对事件的监听，以防止内存泄漏。