vue3学习笔记（9）provide与inject

Vue3专栏入口

一、直接应用

实现目标:
父组件直接给孙子组件传数据，跳过子组件。

需求描述，父组件控制孙子组件的颜色变化。如下图点击父组件中的按钮时，修改孙子组件的颜色。

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>