Vue3 teleport 任意门实现组件穿越

2023-09-16 18:16:51

Vue3 引入了一个新的内置组件 Teleport，这个组件提供了一种强大的方式来将子树渲染到 DOM 中的任何位置。这种功能在处理模态框、提示信息或需要跳出当前视图层次结构的内容时非常有用。

如何使用 Teleport 组件

在 Vue3 项目中使用 Teleport 非常简单，只需要引用 <teleport> 标签，并指定目标元素即可实现元素的传送。下面是一个基本示例：

<template>
  <button @click="isOpen = true">打开对话框</button>

  <teleport to="body">
    <div v-if="isOpen" class="dialog">
      <p>这里是模态内容。</p>
      <button @click="isOpen = false">关闭</button>
    </div>
  </teleport>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
};
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}
</style>

在这个示例中，模态框的内容被传送到了 body 元素内。这种方法能够确保模态框浮在其它内容之上，不会受到父元素样式的干扰。

使用 v-if 和 v-for 动态传送

Teleport 组件可以结合 Vue 的条件渲染和列表渲染指令一起使用，例如：

<template>
  <div>
    <button @click="addTodo">添加任务</button>

    <teleport to="#app">
      <ul id="todo-list">
        <li v-for="(item, index) in todos" :key="index">{{ item }}</li>
      </ul>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: ['学习 Vue3'],
    };
  },
  methods: {
    addTodo() {
      this.todos.push('新任务');
    },
  },
};
</script>