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> 四、运行项目界面效果如下
![](/i/l/?n=22&i=blog/1658398/202211/1658398-20221108095527441-1640549923.png)
点击改变名字按钮 子组件 孙组件 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