Vue3 teleport

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件

我认为的 业务场景，其实就是写个弹窗 Toast之类的全局组件

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

demo 包含往teleport 组件传值

<template>
  <div class="home">这是首页</div>
  <Parent />
</template>

<script>
import { ref } from '@vue/reactivity'
// @ is an alias to /src
import Parent from '../components/parent.vue'
export default {
  name: 'Home',
  components: { Parent },
  setup() {
    const show = ref(false)
    return {
      show
    }
  }
}
</script>

<template>
  <div>
    <button @click="show = !show">打开一个弹窗</button>
    <teleport to="#main">
      <Child v-if="show" :msg='msg'/>
    </teleport>
  </div>
</template>

<script>
import Child from './child.vue'
import { ref } from '@vue/reactivity'
export default {
  components: { Child },
  setup() {
    const show = ref(false)
    const msg = ref('这是子组件的内容')
    return {
      show,
      msg
    }
  }
}
</script>

<template>
  <div class="wrapper">{{ msg1 }}1111</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
export default {
  props: {
    msg: String
  },
  setup(props) {
    const msg1 = ref(props.msg)
    return {
      msg1
    }
  }
}
</script>
<style scoped>
.wrapper {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
  text-align: center;
  background-color: pink;
}
</style>