vue3-组合式api-provide/inject
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/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
