<Teleport> 传递组件
@说明:将组件内的一部份模板传送到组件外层对象上,且不影响整个组件逻辑。
<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>
标签:Vue,const,name,rr,value,result,组件,ref From: https://www.cnblogs.com/wm218/p/16710025.html