Vue 系统组件 <Teleport> 简介

<Teleport> 传递组件

注意：uni-app中不支持！

@说明：将组件内的一部份模板传送到组件外层对象上，且不影响整个组件逻辑。 

<Teleport to=""  display=""></Teleport>

 

属性：

to [必需 String | HTMLElement] 指定目标容器。可以是选择器或实际元素。to参数值一般通过props传递过来。

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

 

disabled [可选 Boolean] 是否禁用这个行为。比如在PC端时，可以传递组件到外部，而在移动端时禁止传递

 

 @应用场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

最常见的例子就是组件中含有模态框。理想下模态框是处在body的根节点中，这样它才不受父容器的限制。

 

多个 Teleport 共享目标：

组件内可以存在多个<Teleport>组件。

如果多个组件的目标为同一DOM元素，则内容采用追加模式，比如：

组件：

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

最终结果：

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

 

示例：

 

 

 

组件ComTestA.vue

<template>
    <view>
        <h3>本人信息</h3>
        <uni-easyinput v-model="name" placeholder="您的姓名" inputBorder>
        </uni-easyinput>
        <uni-data-checkbox v-model="sex" :localdata="sexConfig"> </uni-data-checkbox>
        <Teleport :to="target">
            <p>{{info}}</p>
        </Teleport>
    </view>
</template>

<script setup>
    import {
        ref,
        computed
    } from 'vue'

    defineProps({
        target: {
            type: String,
            require: false
        }
    })
    const name = ref('')
    const sex = ref('')
    const sexConfig = [{
        "value": '女',
        "text": "女"
    }, {
        "value": '男',
        "text": "男"
    }]

    const info = computed(() => {
        let result = ''
        if (name.value) 
            result += '您的姓名：' + name.value + ' '
        
        if (sex.value) 
            result += '性别：' + sex.value + ' '
        
        return result
    })
</script>

 

演示页面

<template>
    <p class="text-danger">以下框内显示组件传递过来的内容</p>
    <div id="message" class="text-center font-weight-bold" style="font-size:25px;height: 100px; border:3px solid #ccc; line-height: 100px;"></div>
    <ComTestA target="#message"></ComTestA>
</template>

<script setup>
    import {
        ref
    } from 'vue'

</script>