Vue 3 中 Setup 函数的参数剖析：深入理解 props 与 context

1. Props：组件的数据桥梁

在 Vue 3 中，props 是一个对象，它包含了子组件从父组件接收的数据。这些数据可以通过 props 选项传递给子组件，从而实现组件之间的通信。

要使用 props，首先需要在子组件的 setup 函数中定义它。例如：

const props = defineProps(['message']);

在上面的代码中，我们定义了一个名为 message 的 prop，它将从父组件接收数据。

接下来，可以在模板中使用 props 来渲染数据。例如：

<template>
  <div>{{ message }}</div>
</template>

在上面的代码中，我们使用 props.message 来渲染从父组件接收到的数据。

2. Context：组件的上下文信息

在 Vue 3 中，context 是一个对象，它包含了组件的上下文信息，包括父组件的实例、根组件的实例、当前组件的组件信息等。

要访问 context，可以在 setup 函数中使用它。例如：

const context = setupContext();

在上面的代码中，我们使用 setupContext() 函数来获取组件的上下文信息。

然后，就可以使用 context 来访问父组件的实例。例如：

const parent = context.parent;

在上面的代码中，我们使用 context.parent 来获取父组件的实例。

3. 子组件向父组件派发事件

在 Vue 3 中，子组件可以通过 emit() 方法向父组件派发事件。例如：

const emit = defineEmits(['updateMessage']);

emit('updateMessage', '新的消息');

在上面的代码中，我们使用 defineEmits() 方法定义了一个名为 updateMessage 的事件，然后使用 emit() 方法来派发这个事件。

在父组件中，可以使用 on() 方法来监听子组件派发的事件。例如：

const onUpdateMessage = (message) => {
  console.log('收到了子组件派发的消息：', message);
};

在上面的代码中，我们使用 on() 方法来监听子组件派发的 updateMessage 事件，并在事件被触发时执行 onUpdateMessage 函数。

4. 优化事件派发

在 Vue 3 中，可以通过使用事件总线来优化事件派发。事件总线是一个全局对象，它允许组件之间进行通信，而不需要直接引用彼此。

要使用事件总线，首先需要创建一个事件总线对象。例如：

const eventBus = new Vue();

然后，就可以使用事件总线来派发事件。例如：

eventBus.$emit('updateMessage', '新的消息');

在上面的代码中，我们使用 eventBus.$emit() 方法来派发 updateMessage 事件。

在其他组件中，可以使用事件总线来监听事件。例如：

eventBus.$on('updateMessage', (message) => {
  console.log('收到了子组件派发的消息：', message);
});

在上面的代码中，我们使用 eventBus.$on() 方法来监听 updateMessage 事件，并在事件被触发时执行匿名函数。

5. 获取父组件传递的数据

在 Vue 3 中，子组件可以通过 props 来获取父组件传递的数据。例如：

const props = defineProps(['message']);

console.log(props.message);

在上面的代码中，我们使用 defineProps() 方法定义了一个名为 message 的 prop，然后使用 console.log() 方法来输出从父组件接收到的数据。

也可以在模板中使用 props 来渲染数据。例如：

<template>
  <div>{{ message }}</div>
</template>

在上面的代码中，我们使用 props.message 来渲染从父组件接收到的数据。

结语

在本文中，我们深入探讨了 Vue 3 中 Setup 函数的两个重要参数：props 和 context。通过剖析这两个参数，您对 Vue 3 的响应式系统和组件通信机制有了更深入的了解。同时，您还学习了如何优化事件派发，以及如何在子组件向父组件派发事件。希望这些知识能帮助您在 Vue 3 的开发中更加得心应手。