Vue 2.0 组件间的通信艺术

前端

2023-12-30 13:08:30

Vue 组件间的通信方式

在 Vue 应用程序中，组件是构建 UI 的基本单元。每个组件都是一个独立的实体，具有自己的状态和行为。当我们需要在组件之间共享数据或触发事件时，就需要进行组件通信。

Vue 提供了多种方式实现组件通信，每种方式都有其独特的优势和适用场景。在本文中，我们将探讨 Vue 2.0 中最常用的几种组件通信方式。

1. props & $emit

props 和 emit 是 Vue 中最基本、最常用的组件通信方式。props 用于父组件向子组件传递数据，而 emit 用于子组件向父组件触发事件。

props

props 是一个 JavaScript 对象，用于在父组件和子组件之间传递数据。父组件在子组件的定义中声明 props，子组件在自己的模板中使用 props。例如：

// 父组件
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

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

在上面的示例中，父组件将 message 数据传递给了子组件。子组件可以通过 this.message 访问该数据。

$emit

$emit 用于在子组件中触发事件。父组件可以通过在子组件的定义中声明一个事件处理函数来监听该事件。例如：

// 父组件
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(`Received message: ${message}`)
    }
  }
}

// 子组件
export default {
  template: `
    <div>
      <button @click="$emit('message', 'Hello Vue!')">Send Message</button>
    </div>
  `
}

在上面的示例中，子组件在按钮点击时触发了一个名为 message 的事件，并传递了一个名为 Hello Vue! 的数据。父组件监听了这个事件，并在事件发生时调用 handleMessage 方法。

2. 事件总线

事件总线是一种全局的事件管理器，它允许组件在不直接引用彼此的情况下相互通信。事件总线通常用于在不同组件之间触发自定义事件，例如：

// 事件总线
export default new Vue()

// 组件 A
export default {
  methods: {
    triggerEvent() {
      this.$eventBus.$emit('my-event', 'Hello Vue!')
    }
  }
}

// 组件 B
export default {
  methods: {
    handleEvent(message) {
      console.log(`Received message: ${message}`)
    }
  },
  created() {
    this.$eventBus.$on('my-event', this.handleEvent)
  },
  beforeDestroy() {
    this.$eventBus.$off('my-event', this.handleEvent)
  }
}

在上面的示例中，组件 A 通过调用 eventBus.emit('my-event', 'Hello Vue!') 来触发一个名为 my-event 的事件。组件 B 通过调用 eventBus.on('my-event', this.handleEvent) 来监听这个事件。当事件发生时，组件 B 会调用 handleEvent 方法。