Vue3.xの新機能がテレポート

要件：
マスクレイヤーやモーダルボックスなどのサードパーティコンポーネントは、デフォルトでボディの下に配置されることがよくあります。これは、親要素のスタイルがボディに影響を与えないようにするためです。ただし、実際のアプリケーションでは、スタイルの変更やコンポーネント化を容易にするために、本体に配置する必要がない場合もあります。サードパーティのコンポーネントライブラリがどのようにそれを行うかを見てみましょう。

vue2の練習：
ここでiviewのモーダルボックスを実行する方法を分析し、このアイデアをマスターしましょう。
モーダルボックスを呼び出すiviewのドキュメントを見てください。

転送の状態を制御して、モーダルコンポーネントが本体の下にあるかどうかを制御します。完了したら、そのソースコードを見てみましょう。

カスタムコマンドとカスタム属性を定義し、カスタム属性のデータ転送の状態をカスタムコマンドv-transfer-domで判断して、モーダルコンポーネントを本体の下に配置するかどうかを制御していることがわかります。v-transfer-domの記述方法の詳細については、ソースコードにアクセスしてください。

vue2.x操作の波を分析して、そのようなサードパーティコンポーネントを作成したい場合、それは非常に面倒です。
vue3.xの場合：
新機能のテレポートを通じて、この需要に簡単に対応できます。最初に次の考えを推測し、次に例を使用してそれを証明します。
アイデア：
ポップアップウィンドウを制御するボタンとポップアップを含む新しいサブコンポーネントtest2を作成し、新しい親コンポーネントpage5を作成し、サブコンポーネントtest2を参照し、サブコンポーネントのポップの背景色を変更します。親コンポーネントのクラスの下のアップフレーム。変更できる場合は、子コンポーネントが親コンポーネントの下にあることを証明します。そうでない場合は、子コンポーネントが本体の下にあることを証明します。もちろん、ページ要素を直接調べることもできます。

親コンポーネントのpage5コード：

<template>
    <div class="page5">
        <test2></test2>
    </div>
</template>
<script>
import test2 from '@/components/test2'
export default {
    
    
    components:{
    
    
        test2
    },
    setup(){
    
    
        return{
    
    

        }
    }
}
</script>
<style lang="less" scoped>
.page5{
    
    
    /deep/.test2-modal{
    
    
        background: blue;
    }
}
</style>

サブコンポーネントtest2コード：

<template>
    <div class="test2">
        <van-button type="primary" @click="modalBtn">控制弹框</van-button>
        <teleport to="body">
            <div class="test2-modal" v-if="visible"></div>
        </teleport>
    </div>
</template>
<script>
import {
    
     ref } from 'vue'
export default {
    
    
    setup(){
    
    
        let visible=ref(false)
        function modalBtn(){
    
    
            visible.value=!visible.value
        }
        return{
    
    
            visible,
            modalBtn
        }
    }
}
</script>
<style lang="less">
.test2{
    
    
    &-modal{
    
    
        width: 100px;
        height: 100px;
        background: red;
    }
}
</style>

結果：

弾丸フレームは子コンポーネントtest2で定義された赤色であり、親コンポーネントは子コンポーネントの弾丸フレームの色を変更できないことがわかります。要素をもう一度確認してみましょう。弾丸フレームのhtmlは

私たちの推測を証明する体。正しい。
本体に配置するかどうかを制御する属性転送も追加する場合は、無効な属性を制御することでテレポートを使用するかどうかを制御できます。コードは次のとおりです。

<template>
    <div class="test2">
        <van-button type="primary" @click="modalBtn">控制弹框</van-button>
        <teleport to='body' :disabled="!transfer">
            <div class="test2-modal" v-if="visible"></div>
        </teleport>
    </div>
</template>
<script>
import {
    
     ref } from 'vue'
export default {
    
    
    props:{
    
    
        transfer:{
    
    
            type:Boolean,
            default:true
        }
    },
    setup(){
    
    
        let visible=ref(false)
        function modalBtn(){
    
    
            visible.value=!visible.value
        }
        return{
    
    
            visible,
            modalBtn
        }
    }
}
</script>
<style lang="less">
.test2{
    
    
    &-modal{
    
    
        width: 100px;
        height: 100px;
        background: red;
    }
}
</style>

転送属性を渡すことで、モーダルボックスをボディの下に配置するかどうかを制御できるようになりました。非常に簡単ではありませんか？