provide/inject 适用于跨级通信，例如在父组件中改变值，在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值
一、父组件
<template> <div> <!-- 子组件 --> <son></son> <button @click="changeName">改变名字</button> </div> </template><script> import son from "./son.vue";
import { provide, ref } from "vue";
export default { components: { son, }, setup() { const name = ref("张三");
//把name提供出去 provide("name", name);
//改变名字 function changeName() { name.value = "李四"; }
return { changeName, }; }, }; </script> 二、子组件 <template> <div> <h2>我是子组件</h2> name: {{ name }} <!-- 孙组件 --> <grandson></grandson> </div> </template>
<script> import grandson from "./grandson.vue"; import { inject } from "vue";
export default { components: { grandson, }, setup() { //依赖注入 const name = inject("name");
return { name, }; }, }; </script>
三、孙组件 <template> <div> <h2>我是孙组件</h2> name: {{ name }} </div> </template>
<script> import { inject } from "vue";
export default { setup() { //依赖注入 const name = inject("name");
return { name, }; }, }; </script> 四、运行项目界面效果如下
点击改变名字按钮 子组件 孙组件 name 由张三变为李四
出 处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
标签：vue,name,provide,api,inject,组件,import From： https://www.cnblogs.com/xiao-wo-niu/p/16868694.html