东莞做网站电话做网站时怎样图片上传怎么才能让图片不变形有什么插件吗

在实际开发中，我们经常需要从父组件向子组件传递数据，一般情况下，我们使用 props。但有时候会遇到深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦，代码可维护性差。

Vue3 提供的 provide 可以在祖先组件中指定注入我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

如下是用法案例：

父组件传值，如下：

<script setup lang="ts">import { provide,ref,readonly } from "vue";import HomeView from "./views/HomeView.vue";provide('a','你好呀') // 提供静态值，子组件不能对这个值进行修改const str=ref('开心啊')provide('b',str) // 提供响应式的值，子组件可以对这个值进行修改const str1=ref('哈哈')provide('c',readonly(str1)) // 将响应式的值转成readonly，子组件不能这个值进行修改
</script><template><HomeView></HomeView>
</template>

 子组件接受值，如下：

<script setup lang="ts">import { inject } from "vue";const a=inject('a')const b=inject('b')b.value='修改了父辈通过provide传来的值'const c=inject('c')c.value='修改了父辈通过provide传来的值' // 警告：[Vue warn] Set operation on key "value" failed: target is readonly. 
</script><template><div>{{a}}</div><div>{{b}}</div><div>{{c}}</div>
</template> 

使用场景：组件深层嵌套的情况下，祖先组件需要给后代组件传值 

注意事项 

• Provide 和 Inject 只能在组件树中的非根节点上使用。也就是说，你不能在根组件上直接使用它们。
• Provide 和 Inject 只在创建时运行一次，并且不会随着组件实例的更新而重新运行。因此，如果你需要动态提供或注入数据，你可能需要使用更复杂的方法，如 props 或自定义事件。
• Provide 和 Inject 不会自动触发视图或组件的重渲染。这意味着如果提供的值发生变化，你不会立即看到这些变化反映在视图上。如果你需要响应这些变化，你可能需要手动触发视图或组件的重渲染。