一、直接应用
实现目标:
父组件直接给孙子组件传数据,跳过子组件。
需求描述,父组件控制孙子组件的颜色变化。如下图点击父组件中的按钮时,修改孙子组件的颜色。
1.1 目录
这是src的目录结构
1.2 App.vue代码(provide)
<template>
<div>
<h1>父组件</h1>
<p>当前颜色:{{ color }}</p>
<button @click="color = 'red'">红</button>
<button @click="color = 'yellow'">黄</button>
<button @click="color = 'blue'">蓝</button>
<hr />
<!-- 使用son组件 -->
<Son />
</div>
</template>
<script lang="ts">
import { defineComponent, provide, ref } from "vue";
// 导入son组件
import Son from "./components/son.vue";
export default defineComponent({
name: "App",
// 注册son组件
components: {
Son,
},
setup(props, context) {
const color = ref("red");
// 提供一个color,标识为color
provide("color", color);
return {
color,
};
},
});
</script>
<style scoped>
</style>
1.3 son.vue代码
<template>
<div>
<h1>儿子组件</h1>
<hr />
<!-- 使用GrandSon组件 -->
<GrandSon />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
// 导入Granson组件
import GrandSon from "./grandSon.vue";
export default defineComponent({
name: "Son",
// 注册Granson组件
components: {
GrandSon,
},
setup(props, context) {},
});
</script>
<style scoped>
</style>
1.4 grandSon.vue代码(inject)
<template>
<div>
<!-- style绑定color -->
<h1 :style="{ color }">孙子组件</h1>
</div>
</template>
<script lang="ts">
import { defineComponent, inject } from "vue";
export default defineComponent({
name: "GrandSon",
setup(props, context) {
// 直接使用inject使用color
const color = inject("color");
return {
color,
};
},
});
</script>
<style scoped>
</style>