亲宝软件园·资讯

展开

vue3新增Teleport

前端精髓 人气:0

vue3新增Teleport

在开始介绍Teleport之前先了解一下React的Portals特性。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

ReactDOM.createPortal(child, container)

第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个 DOM 元素。

通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点中离其最近的父节点:

render() {
  // React 挂载了一个新的 div,并且把子元素渲染其中
  return (
    <div>
      {this.props.children}
    </div>
  );
}

然而,有时候将子元素插入到 DOM 节点中的不同位置也是有好处的:

render() {
  // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
  // `domNode` 是一个可以在任何位置的有效 DOM 节点。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框。常见的情况是创建一个包含全屏模式的组件。

对话框 position: absolute 的定位相对于父 div 作为参考。Teleport 提供了一种简单的方法,使我们可以控制要在DOM中哪个父对象下呈现HTML。

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>
<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

多个 <teleport> 组件可以将其内容添加到同一目标元素。

vue3 Teleport和插件的认识与了解

一、认识Teleport

在组件化开发中,我们封装一个组件A,在另外一个组件B中使用

但是某些情况下,我们希望组件不是挂载在这个组件树上的,可能是移动到Vue app之外的其他位置

Teleport是什么呢?

我们来看下面代码的效果:

二、和组件结合使用

当然,teleport也可以和组件结合一起来使用

我们可以在 teleport 中使用组件,并且也可以给他传入一些数据

三、多个teleport

如果我们将多个teleport应用到同一个目标上(to的值相同),那么这些目标会进行合并

四、认识Vue插件

通常我们向Vue全局添加一些功能时,会采用插件的模式,它有两种编写方式

插件可以完成的功能没有限制,比如下面的几种都是可以的

五、插件的编写方式

这里编写两个插件示例,看一下怎么写和用

对象类型的写法

函数类型的写法

在main.js中通过use使用这两个插件

然后就可以在全局使用$name属性了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

加载全部内容

相关教程
猜你喜欢
用户评论