teleport传送的使用

teleport是传送api，该组件需要一个目标元素，该元素是通过需要一个HTMLElement或者querySelector字符串的属性提供的，可以将内容添加到目标元素中，通常用于显示通知或者提示窗口，显示在组件不同的位置上，可以使用teleport轻松的实现。

示例：给不同的div传送信息

这里需要注意的是，如果是id命名的就是to="#name"，如果是class命名的就是to=".name"，如果是变量，那写法就是:to="变量名称"。

<template>
  <div>
    <div class="header"></div>
    <div class="header1"></div>
    <div class="header2"></div>
    <button @click="teleportClick('.header')">传送</button>
    <button @click="teleportClick('.header1')">传送1</button>
    <button @click="teleportClick('.header2')">传送2</button>
    <teleport :to="position" v-if="position">
      <div>我是被传送的元素{{position}}</div>
    </teleport>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Home",
  setup() {
    let position = ref("");
    let teleportClick = (val: string) => {
      console.log(val);
      position.value = val;
    };
    return {
      teleportClick,
      position,
    };
  },
});
</script>

v-if="position"是避免为空时候的报错，所以要加上判断，否则报错信息如下：

组件之间的双向绑定

Vue3和Vue2实现组件之间双向绑定的方式不太一样，其原因是因为v-model内部的本质变化，Vue2的v-model默认属性名是value，事件名是input，Vue3的v-model默认属性名是modelValue，事件名是update:modelValue。

示例：使用v-model的属性名和事件名实现组件之间的双向绑定。

首先定义一个input组件，在input框输入的时候传值给父组件：

// myinput.vue
<template>
  <div>
    <input type="text" placeholder="子组件的input" @input="setValue" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "my-input",
  setup(props, conText) {
    //  实现组件的双向绑定
    let setValue = (e: any) => {
      console.log(e);
      // 获取父组件v-model的modelValue
      conText.emit("update:modelValue", e.target.value);
    };
    return {
      setValue,
    };
  },
});
</script>

再在父组件中引入myinput组件使用，inputVal就能实时获取到子组件输入时传过来的值：

<template>
  <div>
    <my-input v-model="inputVal"></my-input>
    <div>{{ inputVal }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import MyInput from "@/components/myinput.vue";
export default defineComponent({
  name: "Home",
  components: {
    MyInput,
  },
  setup() {
    let inputVal = ref("");
    return {
      inputVal,
    };
  },
});
</script>

接下来继续学习Vue3的知识点~

Vue3新特性的学习（九）——teleport传送的使用和组件之间的双向绑定

teleport传送的使用

组件之间的双向绑定