vue3provide和inject实现跨层级组件间通信祖孙组件

Posted 2022-02-03 web半晨

目录

• 1、爷爷组件（页面）
• • 1.1、html部分
  • 1.2、typescript部分
• 2、父组件
• • 2.1、html部分
  • 2.2、typescript部分
• 3、孙子组件
• • 3.1、html部分
  • 3.2、typescript部分

---

1、爷爷组件（页面）

1.1、html部分

<template>
  <h2>provide 与 inject</h2>
  <p>当前的颜色: color </p>
  <button @click="color = 'red'">红色</button>
  <button @click="color = 'yellow'">黄色</button>
  <button @click="color = 'green'">绿色</button>
  <hr />
  <Son />
</template>

---

1.2、typescript部分

import  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子级组件</h3>
  <hr />
  <GrandSon />
</template>

---

2.2、typescript部分

import  defineComponent  from "vue";
import GrandSon from "./GrandSon.vue";
export default defineComponent(
  name: "Son",
  components: 
    GrandSon,
  ,
);

---

3、孙子组件

3.1、html部分

<template>
  <h3 :style=" color ">GrandSon孙子组件</h3>
</template>

---

3.2、typescript部分

import  defineComponent, inject  from "vue";
export default defineComponent(
  name: "GrandSon",
  setup() 
    // 注入的操作
    const color = inject("color");
    return 
      color,
    ;
  ,
);