揭秘Vue2组件间通信的14种方式：巧妙而高效的对话艺术

2023-09-25 07:51:24

深入理解 Vue.js 组件通信的 14 种方式

在 Vue.js 的世界中，组件是搭建强大、可扩展应用程序的基础。而组件之间的通信是实现组件协作、数据共享和事件传递的关键。本文将全面解析 Vue.js 中广泛使用的 14 种组件通信方式，从父子通信到兄弟通信，再到跨级和全局通信。深入了解每种方式的特性、优缺点和最佳应用场景，掌握组件通信的技巧，构建更灵活、更强大的 Vue.js 应用程序。

父子通信

父子通信是组件通信中最基本的场景，父组件将数据和事件传递给子组件，而子组件则向父组件发送事件。

1. props

props 是父组件传递数据的常用方式。props 是只读的，子组件不能直接修改，只能使用 props 来渲染自己的模板。

// 父组件
<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Parent!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. $emit

emit 是子组件向父组件发送事件的常用方式。emit 方法接收一个事件名和一个参数，父组件可以通过监听这个事件来响应子组件的事件。

// 子组件
<template>
  <button @click="handleClick">Send Data</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('send-data', 'Data from Child!')
    }
  }
}
</script>

// 父组件
<template>
  <ChildComponent @send-data="handleData" />
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data) // 输出: "Data from Child!"
    }
  }
}
</script>

兄弟通信

兄弟通信是指并列组件之间的通信。它们可以使用事件总线、Vuex、provide/inject 和自定义事件等方式进行通信。

1. 事件总线

事件总线是一个全局的事件发布/订阅系统。任何组件都可以发布或订阅事件，其他组件可以通过监听事件来响应事件。

// 创建事件总线
const eventBus = new Vue()

// 在组件 A 中发布事件
eventBus.$emit('update-data', 'New data from A!')

// 在组件 B 中订阅事件
eventBus.$on('update-data', data => {
  console.log(data) // 输出: "New data from A!"
})

2. Vuex

Vuex 是一个集中式的状态管理工具。组件可以通过 Vuex 来共享数据和状态。

// store.js
export const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件 A
import store from './store'
store.commit('increment') // 增加计数

// 组件 B
import store from './store'
console.log(store.state.count) // 输出: 1

3. provide/inject

provide/inject 是一种依赖注入的方式。父组件可以通过 provide 方法提供数据，子组件可以通过 inject 方法注入这些数据。

// 父组件
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from Parent!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  inject: ['message']
}
</script>

跨级通信

跨级通信是指非父子组件之间的通信。它们可以使用事件总线、Vuex、provide/inject、mixin、全局事件和 scoped slot 等方式进行通信。

1. mixin

mixin 是一种可以被多个组件复用的 JavaScript 对象。mixin 可以包含数据、方法和生命周期钩子。

// mixin.js
export const myMixin = {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// 组件 A
import { myMixin } from './mixin'
export default {
  mixins: [myMixin]
}

// 组件 B
import { myMixin } from './mixin'
export default {
  mixins: [myMixin]
}

2. 全局事件

全局事件是一种可以在任何组件中使用的事件。全局事件可以通过 Vue.prototype.on 和 Vue.prototype.emit 来监听和触发。

// 在任何组件中
Vue.prototype.$on('global-event', data => {
  console.log(data)
})

// 在另一个组件中
Vue.prototype.$emit('global-event', 'Global event data!')

3. scoped slot

scoped slot 是一种可以在子组件中使用的插槽。scoped slot 可以接收父组件传递的数据，并根据这些数据渲染子组件的内容。

// 父组件
<template>
  <ChildComponent>
    <template #default="slotProps">
      {{ slotProps.message }}
    </template>
  </ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Parent!'
    }
  }
}
</script>

// 子组件
<template>
  <slot v-if="message" :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: null
    }
  },
  props: ['message']
}
</script>