Vue3传送组件Teleport

Vue3传送组件Teleport

Teleport 组件vue3新出的组件主要用于把组件传送到另一个组件的下面 ,避免样式被父组件的样式污染,上代码。

1.子组件TelePort




2.父组件代码


3.index.html里面的代码

	



  
  
  
  
  <%= htmlWebpackPlugin.options.title %>



  
  

说明:使用前 dom节点在#app节点下面,使用后dom在#center 节点下面。

使用前 app的样式会污染子组件TelePort的样式。

Vue3传送组件Teleport_第1张图片

使用Teleport组件后 子组件TelePort在#center节点下面,子组件样式没有被污染

Vue3传送组件Teleport_第2张图片

你可能感兴趣的:(vue,js,vue.js,前端,javascript)