Vue3中详解SetUp函数的props与context参数及其用法

在Vue3中，`setup` 函数是一个特殊的钩子，它在每个组件实例创建时执行，用于初始化组件的逻辑。这个函数有两个主要参数：`props` 和 `context`，它们在组件生命周期的不同阶段起着关键作用。 1. **props参数**: - `props` 是一个对象，它是父组件向子组件传递数据的主要方式。父组件可以通过 `props` 属性将数据作为属性绑定到子组件上。`props` 参数通常包含组件之间交互所需的静态数据，这些数据在组件实例创建后不会改变。例如，在提供的代码示例中： ```javascript <no-cont :mytitle="msg" otherTitle="别人的标题" @sonclick="sonclick"></no-cont> ``` 这里，`mytitle` 和 `otherTitle` 是通过 `props` 从父组件传递给子组件 `NoCont` 的。子组件在 `setup` 函数中尝试访问 `props.mytitle`，但由于没有在组件定义中明确声明接收这个属性，所以输出的值是 `undefined`。 2. **context参数**: - `context` 提供了组件与外部环境（如事件总线或自定义指令）交互的桥梁。在这个上下文中，你可以使用 `emit` 方法来触发自定义事件，并在父组件中监听这些事件。在提供的`NoCont` 组件的`setup` 函数中，`context.emit('sonclick', '子组件传递给父组件')` 用于将事件传递给父组件。 3. **未接受props的情况**: - 当在子组件的 `setup` 函数中未显式声明接收某个 `props` 时，表示组件默认不依赖该属性。如果父组件未提供这个属性，那么在子组件内部访问它就会返回 `undefined`。为了避免这种情况，建议在子组件的 `setup` 中对 `props` 做出明确的声明，即使不需要直接使用。 总结来说，理解 `props` 和 `context` 在Vue3组件中的作用对于构建可维护和高效的数据流动至关重要。通过正确地声明和使用它们，可以确保数据的安全传递，避免意外的undefined值，同时充分利用Vue3的特性来实现组件间的通信。