祖先组件App.vue
<template>
<div class="app">
<h1>这是祖先组件。{
{ name }}---{
{ price }}</h1>
<ChildComponent></ChildComponent>
</div>
</template>
<script>
import ChildComponent from "@/components/ChildComponent";
import {
provide, reactive} from "vue";
export default {
name: 'App',
components: {
ChildComponent
},
setup() {
const car = reactive({
name: '奔驰', price: '40W'})
provide('car', car)
return {
...car
}
}
}
</script>
<style>
.app {
background-color: gray;
padding: 10px;
}
</style>
孩子组件ChildComponent.vue
<template>
<div class="child">
<h1>这是孩子组件</h1>
<GrandsonAssembly></GrandsonAssembly>
</div>
</template>
<script>
import GrandsonAssembly from "@/components/GrandsonAssembly";
export default {
name: "ChildComponent",
components: {
GrandsonAssembly
}
}
</script>
<style scoped>
.child {
background-color: skyblue;
padding: 10px;
}
</style>
孙子组件GrandsonAssembly.vue
<template>
<div class="son">
<h1>这是孙子组件。{
{ car.name }}---{
{ car.price }}</h1>
</div>
</template>
<script>
import {
inject} from "vue";
export default {
name: "GrandsonAssembly",
setup() {
const car = inject('car')
console.log(car)
return {
car
}
}
}
</script>
<style scoped>
.son {
background-color: orange;
padding: 10px;
}
</style>
结果