父组件Index.vue:
javascript
<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:
javascript
<script setup>
import { onMounted, ref } from 'vue'
import List from './List.vue'
onMounted(() => {})
</script>
<template>
<List></List>
</template>
孙子组件List.vue:
javascript
<script setup>
import { onMounted, ref, inject } from 'vue'
const count = inject('count')
onMounted(() => {})
</script>
<template>
<div>孙子组件:{{ count }}</div>
</template>
人工智能学习网站