provide 、inject 它们两个需要互相配合使用，方便用于父传子，更方便用于孙子组件传递

如下代码

App 父组件

<template>
  <div>
    我是App组件
  </div>

  <button @click="count += 1">点我加+</button>

  <hr/>
  // 必须要引入，要不然child那边会警告
  <Child></Child>

</template>


<script setup>

import { ref, provide } from 'vue'

import Child from './child.vue'

const count = ref(0)

provide('count',count)

</script>

child 子组件

<template>

  <div>

    我是child组件

  </div>

  <h3>从App接收到的数据{{childCount}}{{childData}}</h3>

  <hr/>

   <Mode></Mode>

</template>


<script setup>

import { inject } from 'vue'

import Mode from './mode.vue'

const childCount = inject('count')

const childData = inject('data',{name:'aaa'})

</script>

mode 孙子组件

<template>

  <div class="mode">

    我是mode组件

  </div>

  <h3>接收到的数据{{data}}</h3>

</template>


<script setup>

import { inject } from 'vue'


const data = inject('data')

</script>

如图