组件通信的方式：从Vue2.x开始揭晓！

前端

2023-12-28 16:45:26

在Vue.js中，组件是构建用户界面的基本单元，它们可以被组合起来创建更复杂的应用程序。在构建大型应用程序时，组件之间的通信是必不可少的，Vue提供了多种方式来实现组件之间的通信。

组件通信方式

1. props 和 $emit (常用)

props 是子组件接收父组件数据的一种方式，而 $emit 则是子组件向父组件发送事件的一种方式。这是 Vue 中最常用的组件通信方式，也是最简单的一种。

2. attrs 和 listeners

attrs 是父组件传递给子组件的属性，而 listeners 是子组件监听父组件事件的一种方式。attrs 和 listeners 的使用方式与 props 和 $emit 类似，但它们适用于父子组件之间没有明确关系的情况。

3. 中央事件总线（非父子组件间）

中央事件总线是一种在非父子组件之间通信的方式。它通过一个全局的事件中心来实现组件之间的通信。中央事件总线的使用方式也很简单，首先需要创建一个事件中心，然后组件可以通过事件中心来发送和接收事件。

总结

Vue提供了多种方式来实现组件之间的通信，每种方式都有其独特的优缺点。开发人员可以根据自己的需要选择合适的方式来实现组件之间的通信。

实例

1. props 和 $emit

// 父组件
<template>
  <child-component :message="message" @update-message="updateMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'Hello, Vue!')
    }
  }
}
</script>

2. attrs 和 listeners

// 父组件
<template>
  <child-component :message="message" @update-message="updateMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

<script>
export default {
  attrs: ['message'],
  listeners: {
    'update-message': 'updateMessage'
  },
  methods: {
    updateMessage() {
      this.$emit('update-message', 'Hello, Vue!')
    }
  }
}
</script>

3. 中央事件总线

// 创建事件中心
const eventBus = new Vue()

// 父组件
<template>
  <child-component></child-component>
</template>

<script>
export default {
  mounted() {
    eventBus.$on('update-message', this.updateMessage)
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

<script>
export default {
  mounted() {
    eventBus.$on('update-message', this.updateMessage)
  },
  methods: {
    updateMessage() {
      eventBus.$emit('update-message', 'Hello, Vue!')
    }
  }
}
</script>