Vue 3 组件通信全解：从基础到高级技巧

defineEmits 用于声明组件可以发出的事件，而 emit 函数用于触发这些事件。

如何在父组件中监听子组件的事件
在父组件的模板中，使用 v-on 或简写 @ 来监听子组件发出的事件：

这里，@my-event 表示监听子组件发出的 my-event 事件，handleEvent 是父组件中定义的方法，当事件被触发时，这个方法将被调用。

综合示例

假设有一个父组件 ParentComponent 和一个子组件 ChildComponent，父组件需要向子组件传递数据，并且子组件需要在特定操作后通知父组件。

父组件 ParentComponent.vue

 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
script>

子组件 ChildComponent.vue

 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
script>

在这个示例中，父组件通过 :my-prop 向子组件传递数据，并通过 @child-event 监听子组件发出的事件。子组件通过 defineProps 接收父组件传递的 myProp，并在按钮点击事件中使用 emit 向父组件发送数据。

使用 Pinia（Vue 3 的状态管理库）

Pinia 的优势和特点

Pinia 是 Vue 3 官方推荐的状态管理库，它提供了一种组件式的方式来管理应用状态。以下是 Pinia 的一些主要优势和特点：

• 组件式 API：Pinia 采用组件式 API，使得状态管理与组件逻辑的分离更加自然。
• TypeScript 支持：Pinia 从一开始就考虑了 TypeScript 的支持，使得在使用 TypeScript 开发时能够获得更好的类型推断和编辑器支持。
• 模块化：Pinia 允许你将状态分割成多个 store，每个 store 可以独立管理自己的状态和逻辑。
• 组合式 API 兼容：Pinia 与 Vue 3 的 Composition API 完美集成，使得状态管理与组件逻辑的分离更加自然。
• 时间旅行调试：Pinia 提供了时间旅行调试功能，允许开发者轻松地回溯和检查状态变化。

如何设置和使用 Pinia

要开始使用 Pinia，首先需要安装 Pinia：

npm install pinia

或者使用 Yarn：

yarn add pinia

然后，在你的 Vue 应用中设置 Pinia：

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

创建一个 store：

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

在组件中使用 store：

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

Pinia 与组件的集成

Pinia 与组件的集成非常简单，主要通过 defineStore 函数来创建 store。在组件中，你可以直接使用 store 中的状态和方法：

 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
script>

在上面的例子中，我们直接在模板中访问 count 来显示计数器的值，并在按钮点击事件中调用 increment 方法来增加计数器的值。

Vue 3 特有的通信方式

Provide/Inject

Provide/Inject 的基本用法
在 Vue 3 中，provide 和 inject 是一种父子组件间通信的方式，允许一个祖先组件向其所有子孙组件注入一个依赖，而不论组件层次有多深。

• 提供数据：祖先组件使用 provide 函数提供数据。
• 注入数据：子孙组件使用 inject 函数注入数据。

Provide/Inject 的适用场景
provide 和 inject 适用于以下场景：

• 当你希望避免通过多层 props 传递数据时。
• 当你希望组件树中的多个组件共享数据时。

示例代码：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Teleport

Teleport 的概念和用途
Teleport 是 Vue 3 新增的一个内置组件，它允许你将一个组件内部的一部分模板“传送”到 DOM 中的任何其他位置。

如何使用 Teleport 进行组件通信
Teleport 本身不是用来进行组件间通信的，而是用来控制组件渲染位置的。但你可以利用 Teleport 将组件的某些部分渲染到父组件的 DOM 中，从而实现一种特殊的通信方式。

示例代码：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

Composition API

Composition API 的介绍
Vue 3 引入了 Composition API，它提供了一种新的方式来组织和重用逻辑。通过 setup 函数，开发者可以更灵活地控制组件的响应式状态和生命周期。

使用 ref 和 reactive 进行组件间通信
ref 和 reactive 是 Composition API 中用于创建响应式数据的工具。

• ref 用于创建基本数据类型的响应式引用。
• reactive 用于创建对象类型的响应式引用。

使用 provide 和 inject 在 Composition API 中
在 Composition API 中，provide 和 inject 可以在 setup 函数中使用，以实现跨组件的通信。

示例代码：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

通过这些 Vue 3 特有的通信方式，开发者可以更加灵活地组织组件间的通信，提高代码的可维护性和可重用性。

总结

Vue 3 引入了 Composition API，为组件通信带来了新的灵活性和强大的功能。组件通信是前端开发中构建复杂用户界面的关键，它涉及父子组件、兄弟组件以及祖先和后代组件之间的数据传递和事件触发。Vue 3 提供了多种通信方式，包括传统的 props 和 emit，以及新增的 Provide/Inject、Teleport 和 Composition API。

相关资料推荐

• Vue 3 官方文档：Vue.js - The Progressive JavaScript Framework | Vue.js - 官方文档是学习 Vue 3 最权威的资源，包含了详细的指南和 API 参考。
• Vue.js 3 Composition API 教程：Composition API FAQ | Vue.js - 官方提供的 Composition API 教程，帮助你快速上手。
• Pinia 官方文档：Pinia | The intuitive store for Vue.js - 如果你打算使用 Pinia 进行状态管理，Pinia 的官方文档是最佳学习资源。
• Vue.js 技术揭秘：前言 | Vue.js 技术揭秘 - 这是一个深入分析 Vue.js 内部机制的项目，有助于理解 Vue 的工作原理。

创作不易，如果这篇文章有帮助到你，给个点赞可以吗