使用场景:有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据。
父组件
<template>
<div id="app">
<h1>父组件</h1>
<p>{{ money }}</p>
<Son :money="money" @changeMoney="changeMoney"></Son>
</div>
</template>
<script>
import { ref, provide } from "vue";
import Son from "./components/Son.vue";
export default {
name: "App",
components: {
Son,
},
setup() {
const money = ref(100);
const changeMoney = (val) => {
// val 是子组件传出来的值
console.log(val);
money.value = val;
};
// 将数据提供给后代组件 provide
provide("money", money);
return { money, changeMoney };
},
};
</script>
<style>
</style>
子组件
<template>
<div>
<h1>子组件</h1>
<p>{{ money }}</p>
<GrandSon></GrandSon>
</div>
</template>
<script>
import GrandSon from './GrandSon.vue'
export default {
name: "Son",
props: ["money"],
components:{GrandSon},
setup(props, ctx) {
console.log(props.money);
//定义函数 抛出 值
const changeMoney = () => {
console.log(ctx);
ctx.emit("changeMoney", 20);
};
return { changeMoney };
},
};
</script>
<style>
</style>
孙组件
<template>
<div>
<h1>孙组件</h1>
<p>{{ money }}</p>
</div>
</template>
<script>
import { inject } from "vue";
export default {
name: "Son",
setup() {
const money = inject("money");
console.log("孙组件接受到的", money);
return { money };
},
};
</script>
<style>
</style>
总结
provide函数提供数据和函数给后代组件使用
inject函数给当前组件注入provide提供的数据和函数