VUE框架Vue3使用provide和inject实现隔代数据传递效果------VUE框架

<template>
    <div class="s2">
        <h1>我是爷爷组件{
    
    { counter }}</h1>
        <SunZi></SunZi>
    </div>
</template>

<script>
import send from "../hooks/send.js"
import SunZi from "./ErZi.vue";
export default {
    name : "YeYe",
    components : {SunZi},
    setup(){
        let counter = send();
        return {counter};
    }
}
</script>

<style lang="css" scoped>
    .s2{
        width : 400px;
        height : 400px;
        background-color: bisque;
    }
</style>

<template>

    <div class="s2">

        <h1>我是爷爷组件{ { counter }}</h1>

        <SunZi></SunZi>

    </div>

</template>

<script>

import send from "../hooks/send.js"

import SunZi from "./ErZi.vue";

export default {

    name : "YeYe",

    components : {SunZi},

    setup(){

        let counter = send();

        return {counter};

    }

}

</script>

<style lang="css" scoped>

    .s2{

        width : 400px;

        height : 400px;

        background-color: bisque;

    }

</style>

<template>
    <div class="s1">
        <h1>我是App组件</h1>
        <YeYe></YeYe>
    </div>
</template>

<script>
import YeYe from "./components/YeYe.vue";
export default {
    name : "App",
    components : {YeYe}
}
</script>

<style lang="css" scoped>
    .s1{
        width : 500px;
        height : 500px;
        background-color: aquamarine;
    }
</style>

<template>

    <div class="s1">

        <h1>我是App组件</h1>

        <YeYe></YeYe>

    </div>

</template>

<script>

import YeYe from "./components/YeYe.vue";

export default {

    name : "App",

    components : {YeYe}

}

</script>

<style lang="css" scoped>

    .s1{

        width : 500px;

        height : 500px;

        background-color: aquamarine;

    }

</style>

<template>
    <div class="s3">
        <h1>我是儿子组件{
    
    { counter }}</h1>
         <SunZi></SunZi>
    </div>
</template>

<script>
import SunZi from "./SunZi.vue"
import receive from "../hooks/receive.js"
export default {
    name : "ErZi",
    components : {SunZi},
    setup(){
        let counter = receive();
        return {counter};
    }
}
</script>

<style lang="css" scoped>
    .s3{
        width : 300px;
        height : 300px;
        background-color: chartreuse;
    }
</style>

<template>

    <div class="s3">

        <h1>我是儿子组件{ { counter }}</h1>

         <SunZi></SunZi>

    </div>

</template>

<script>

import SunZi from "./SunZi.vue"

import receive from "../hooks/receive.js"

export default {

    name : "ErZi",

    components : {SunZi},

    setup(){

        let counter = receive();

        return {counter};

    }

}

</script>

<style lang="css" scoped>

    .s3{

        width : 300px;

        height : 300px;

        background-color: chartreuse;

    }

</style>

<template>
    <div class="s4">
        <h1>我是孙子组件{
    
    { counter }}</h1>
        <button @click="isShow = true">弹窗</button>
        <!-- 瞬移 -->
        <Teleport to="body">
            <!-- 遮罩层,整个遮罩层需要瞬移到body下 -->
            <div v-show="isShow" class="cover">
            <!-- 这是一个模态窗口 -->
                <div class="s">
                    我是一个窗口
                    <button @click="isShow = false">关闭窗口</button>
                </div>
            </div>
        </Teleport>
    </div>
</template>

<script>
import {ref,inject} from "vue";
import receive from "../hooks/receive.js";
export default {
    name : "SunZi",
    setup(){
        let isShow = ref(false);
        let counter = receive();
        return {isShow,counter};
    }
}
</script>

<style lang="css" scoped>
    .s4{
        width : 200px;
        height : 200px;
        background-color: darkmagenta;
    }
    .s{
        width: 250px;
        height: 250px;
        background-color: cadetblue;
    }
    .cover{
        position: absolute;
        top : 0;bottom: 0;left: 0;right: 0;
        background-color: darkgrey;
        opacity: 90%;
    }
</style>

<template>

    <div class="s4">

        <h1>我是孙子组件{ { counter }}</h1>

        <button @click="isShow = true">弹窗</button>

        <!-- 瞬移 -->

        <Teleport to="body">

            <!-- 遮罩层,整个遮罩层需要瞬移到body下 -->

            <div v-show="isShow" class="cover">

            <!-- 这是一个模态窗口 -->

                <div class="s">

                    我是一个窗口

                    <button @click="isShow = false">关闭窗口</button>

                </div>

            </div>

        </Teleport>

    </div>

</template>

<script>

import {ref,inject} from "vue";

import receive from "../hooks/receive.js";

export default {

    name : "SunZi",

    setup(){

        let isShow = ref(false);

        let counter = receive();

        return {isShow,counter};

    }

}

</script>

<style lang="css" scoped>

    .s4{

        width : 200px;

        height : 200px;

        background-color: darkmagenta;

    }

    .s{

        width: 250px;

        height: 250px;

        background-color: cadetblue;

    }

    .cover{

        position: absolute;

        top : 0;bottom: 0;left: 0;right: 0;

        background-color: darkgrey;

        opacity: 90%;

    }

</style>

import {ref,provide} from "vue";
export default function(){
    let counter = ref(1);
    // 在爷爷组件使用provide提供数据
    provide("counter",counter);
    return counter;
}

import {ref,provide} from "vue";

export default function(){

    let counter = ref(1);

    // 在爷爷组件使用provide提供数据

    provide("counter",counter);

    return counter;

}

import { inject } from "vue";
export default function(){
    let counter = inject("counter");
    return counter;
}

import { inject } from "vue";

export default function(){

    let counter = inject("counter");

    return counter;

}