vue3中provide、inject孙传祖组件通信

//祖组件
import { ref, onMounted, reactive, nextTick, computed, provide } from "vue";
import { updateMessageFromChild, definitionClassKey } from "@/api/interface/symbolKey";

let definitionClass = 1;
function receiveGrandson(message) {
  definitionClass = message;
}
provide(updateMessageFromChild, receiveGrandson);
provide(definitionClassKey, definitionClass);

//孙组件
<template>
  <div>
    <div class="detection-row">
      <div>清晰度设置</div>
      <div class="select">
        <el-select v-model="definitionClass" @change="sendDataToGrandParent">
          <el-option v-for="v in selectList" :key="v.id" :label="v.label" :value="v.id" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import { updateMessageFromChild, definitionClassKey } from "@/api/interface/symbolKey";

const definitionClass = inject(definitionClassKey);

const updateData = inject(updateMessageFromChild);
const sendDataToGrandParent = () => {
  if (updateData) {
    updateData(definitionClass.value);
  }
};
const selectList = ref([
  { label: "流畅", id: 1 },
  { label: "清晰", id: 2 },
  { label: "高清", id: 3 },
  { label: "超清", id: 4 }
]);
</script>

<style scoped lang="scss"></style>

//symbolKey
export const updateMessageFromChild = Symbol();
export const definitionClassKey = Symbol();