目录
1、爷爷组件（页面）
1.1、html部分
- 1、爷爷组件（页面）
-
- 1.1、html部分
- 1.2、typescript部分
- 2、父组件
-
- 2.1、html部分
- 2.2、typescript部分
- 3、孙子组件
-
- 3.1、html部分
- 3.2、typescript部分
<template> <h2>provide 与 inject{ color }} defineComponent, provide, ref } from "vue"; import Son from "./components/Son.vue"; export default defineComponent({ name: "App", components: { Son, }, setup() { // 响应式的数据 const color = ref("red"); // 提供数据 provide("color", color); return { color, }; }, });
2、父组件
2.1、html部分
<template> <h3>Son子级组件 defineComponent } from "vue"; import GrandSon from "./GrandSon.vue"; export default defineComponent({ name: "Son", components: { GrandSon, }, });
3、孙子组件
3.1、html部分
<template> <h3 :style="{ color }">GrandSon孙子组件 defineComponent, inject } from "vue"; export default defineComponent({ name: "GrandSon", setup() { // 注入的操作 const color = inject("color"); return { color, }; }, });
