父组件Index.vue:

<script setup>
import { onMounted, provide, ref } from 'vue'
import Child from './Child.vue'
import './index.css'const count = ref(0)provide('count', count)const handleClick = () => {count.value++
}onMounted(() => {})
</script><template><div class="m-home-wrap"><button @click="() => handleClick()">{{ count }}</button><Child></Child><div class="m-home-demo"></div></div>
</template><style></style>

子组件Child.vue:

<script setup>
import { onMounted, ref } from 'vue'
import List from './List.vue'onMounted(() => {})
</script><template><List></List>
</template>

孙子组件List.vue:

<script setup>
import { onMounted, ref, inject } from 'vue'const count = inject('count')onMounted(() => {})
</script><template><div>孙子组件：{{ count }}</div>
</template>

人工智能学习网站

 https://chat.xutongbao.top