不支持同一目标上使用多个teleport(代码通过v-if就能实现)
组件
<script>
export default {
name: 'teleport',
props: {
/* 移动至哪个标签内,最好使用id */
to: {
type: String,
required: true
}
},
mounted() {
document.querySelector(this.to).appendChild(this.$el)
},
destroyed() {
document.querySelector(this.to).removeChild(this.$el)
},
render() {
return this.$scopedSlots.default()
}
}
</script>
使用
<teleport to="#header__left">
<div>
当前组件引用{{msg}}
</div>
</teleport>