vue3中的inject和provide的传值总结

发布网友发布时间：2024-09-15 01:59

共1个回答

热心网友时间：2024-11-11 19:14

与Vue2相同，inject和provide被用于组件间的数据传递。

这种用法尤其在组件嵌套层级较多（超过两级）时尤为方便，允许直接传输数据。

以下是一个代码示例：

假设父组件嵌套了A组件，而A组件的子组件是B组件。

即使B组件位于A组件的下一层，它依然能够轻松接收到来自父组件的数据。

数据定义：使用provide('num1', num)来设置数据。

数据使用：通过const num = inject('num1')来访问数据。

1. 父组件：

2. A组件

3. B组件

注意事项：

1. A组件同样可以通过const num = inject('num1')来获取num的值。A组件与B组件可以同时使用此方法。

2. 如果在父组件中对num的值进行了修改，那么A组件和B组件中的数据也会相应地同步更新，这是由于数据的响应式特性所致。