剖析 Vue 组件通信方式，让应用井井有条

2023-12-01 00:30:40

Vue.js 是一个流行的前端框架，它以其组件化、响应式和可扩展性而备受推崇。Vue.js 中的组件通信对于构建大型且复杂的应用程序至关重要，它使开发人员能够将应用程序分解为更小的、独立的可重用组件，从而提高代码的可管理性和可维护性。

组件通信方式概述

Vue.js 中有许多组件通信方式，每种方式都有其独特的优势和适用场景。下表总结了常用的组件通信方式及其特点：

组件通信方式	特点
props	父组件通过 props 向子组件传递数据
emit / $emit	子组件通过 emit / $emit 向父组件传递事件
parent / children	父组件通过 parent 访问子组件，子组件通过 children 访问父组件
provide / inject	父组件通过 provide 向子组件提供数据，子组件通过 inject 接收数据
事件总线	通过一个中央事件总线来实现组件之间的通信
Vuex	一个集中式的状态管理库，用于在组件之间共享数据

props

props 是最常用的组件通信方式之一。父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。props 可以是基本数据类型，也可以是复杂的数据结构。

<!-- 父组件 -->
<template>
  <child-component :message="message" />
</template>

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

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

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

在上面的例子中，父组件通过 :message 属性向子组件传递 message 数据，子组件通过 props 接收该数据并显示在页面上。

emit / $emit

emit 和 emit 是子组件向父组件传递事件的两种方式。emit 是一个自定义事件，它可以在子组件中触发。emit 是一个内置方法，它可以用来触发自定义事件。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @click="handleChildClick" />
</template>

<script>
export default {
  methods: {
    handleChildClick() {
      console.log('Child component clicked!')
    }
  }
}
</script>

在上面的例子中，子组件通过 @click 事件监听 handleClick 方法，当按钮被点击时，handleClick 方法触发 click 自定义事件，父组件通过 @click 事件监听 handleChildClick 方法，当 click 自定义事件被触发时，handleChildClick 方法被调用。

parent / children

parent 和 children 是两个特殊属性，它们允许父组件访问子组件，子组件访问父组件。

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

<script>
export default {
  mounted() {
    console.log(this.$children) // 输出子组件实例数组
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ $parent.message }}</p>
</template>

<script>
export default {
  mounted() {
    console.log(this.$parent) // 输出父组件实例
  }
}
</script>

在上面的例子中，父组件通过 this.$children 访问子组件实例数组，子组件通过 this.$parent 访问父组件实例。

provide / inject

provide 和 inject 是两个用于在组件之间共享数据的 API。provide 可以用来向子组件提供数据，inject 可以用来从父组件获取数据。

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

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

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

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