vue2使用vue3写法,vue3使用

　　本文主要介绍vue2如何实现vue3的隐形传态，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue2实现了瞬移vue3的新特性。传送介绍什么是传送，如何使用传送。

vue2实现vue3的teleport

　　不支持在同一个目标上使用多个传送(代码可以用v-if实现)

　　组件

　　脚本

　　导出默认值{

　　名称：“传送”，

　　道具：{

　　/*要在哪个标签中移动，最好使用id */

　　收件人：{

　　类型：字符串，

　　必填：真

　　}

　　},

　　已安装(){

　　document.querySelector(this.to)。appendChild(这个。$el)

　　},

　　销毁(){

　　document.querySelector(this.to)。removeChild(this。$el)

　　},

　　render() {

　　return div{this。$scopedSlots.default()}/div

　　}

　　}

　　/脚本

　　使用

　　瞬间移动到=#header__left

　　差异

　　当前组件引用{{msg}}

　　/div

　　/瞬间移动

vue3新特性teleport介绍

teleport是什么

　　Teleport是一种可以将我们的模板移动到DOM中Vue app以外的其他位置的技术。

　　如果我们嵌套在Vue的一个组件内部，那么处理嵌套组件的定位、z索引和样式将会很困难。

　　使用Teleport可以轻松解决组件间css层次问题。

teleport怎么使用

　　要使用teleport，我们必须首先向页面添加一个元素，我们将把模态内容移动到页面。

　　下面举个例子

　　//index.html

　　身体

　　.

　　div id=app/div！- Vue安装元件-

　　div id=模态包装

　　！-莫代尔应该移到这里-

　　/div

　　/body

　　当我们在teleport组件中包装模态内容时，我们还需要指定一个to属性，并为该属性分配一个查询选择器来标识目标元素，在本例中是#modal-wrapper。

　　//App.vue

　　模板

　　button @click=toggleModalState 打开模式/按钮

　　传送到=#modal-wrapper

　　情态动词if=modalOpen

　　费罗，我是一个模态窗口。/p

　　/modal

　　/瞬间移动

　　/模板

　　传送中的任何东西都会被渲染到目标元素中。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。