VUE フレームワークモーダルウィンドウ切り替えを実現するための Vue3 コンポーネント転送-----VUE フレームワーク

<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>
<テンプレート>

<div class="s1">

<h1>私はアプリコンポーネントです</h1>

<イェイェ></イェイェ>

</div>

</テンプレート>

<スクリプト>

YeYe を「./components/YeYe.vue」からインポートします。

デフォルトのエクスポート {

名前：「アプリ」、

コンポーネント: {YeYe}

}

</script>

<style lang="css" スコープ>

.s1{

幅: 500ピクセル;

高さ: 500ピクセル;

背景色: アクアマリン;

}

</スタイル>

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

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

<style lang="css" scoped>
    .s2{
        width : 400px;
        height : 400px;
        background-color: bisque;
    }
</style>
<テンプレート>

<div class="s2">

<h1>私はおじいちゃんコンポーネントです</h1>

<孫子></孫子>

</div>

</テンプレート>

<スクリプト>

"./ErZi.vue" から SunZi をインポートします。

デフォルトのエクスポート {

名前：「イェイ」、

コンポーネント: {SunZi}

}

</script>

<style lang="css" スコープ>

.s2{

幅: 400ピクセル;

高さ: 400ピクセル;

背景色: 素焼き;

}

</スタイル>

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

<script>
import SunZi from "./SunZi.vue"
export default {
    name : "ErZi",
    components : {SunZi}
}
</script>

<style lang="css" scoped>
    .s3{
        width : 300px;
        height : 300px;
        background-color: chartreuse;
    }
</style>
<テンプレート>

<div class="s3">

<h1>私は息子コンポーネントです</h1>

<孫子></孫子>

</div>

</テンプレート>

<スクリプト>

"./SunZi.vue" から SunZi をインポートします

デフォルトのエクスポート {

名前：「エルジ」、

コンポーネント: {SunZi}

}

</script>

<style lang="css" スコープ>

.s3{

幅: 300ピクセル;

高さ: 300ピクセル;

背景色: シャルトルーズ;

}

</スタイル>

<template>
    <div class="s4">
        <h1>我是孙子组件</h1>
        <button @click="isShow = true">弹窗</button>
        
        <Teleport to="body">
            
            <div v-show="isShow" class="cover">
            
                <div class="s">
                    我是一个窗口
                    <button @click="isShow = false">关闭窗口</button>
                </div>
            </div>
        </Teleport>
    </div>
</template>

<script>
import {ref} from "vue";
export default {
    name : "SunZi",
    setup(){
        let isShow = ref(false);
        return {isShow};
    }
}
</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>
<テンプレート>

<div class="s4">

<h1>私は孫コンポーネントです</h1>

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



<="body"> にテレポートします



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



<div class="s">

私は窓です

<button @click="isShow = false">ウィンドウを閉じる</button>

</div>

</div>

</テレポート>

</div>

</テンプレート>

<スクリプト>

「vue」から {ref} をインポートします。

デフォルトのエクスポート {

名前：「孫子」、

設定（）{

let isShow = ref(false);

{isShow} を返します。

}

}

</script>

<style lang="css" スコープ>

.s4{

幅: 200ピクセル;

高さ: 200ピクセル;

背景色: ダークマゼンタ;

}

.s{

幅: 250ピクセル;

高さ: 250ピクセル;

背景色: cadetblue;

}

。カバー{

位置: 絶対;

上: 0;下: 0;左: 0;右: 0;

背景色: ダークグレー;

不透明度: 90%;

}

</スタイル>

VUE フレームワーク モーダル ウィンドウ切り替えを実現するための Vue3 コンポーネント転送-----VUE フレームワーク

Guess you like

VUE フレームワークモーダルウィンドウ切り替えを実現するための Vue3 コンポーネント転送-----VUE フレームワーク