这是我参与更文挑战的第28天，活动详情查看： 更文挑战

一、teleport传送api使用

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

1.1 新建一个dialog组件

<template>
  <div>
    <div class="mdialog"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "",
});
</script>

<style scoped lang='scss'>
.mdialog {
  // position: absolute;
  width: 50px;
  height: 50px;

  background-color: black;
  z-index: 999;
}
</style>
复制代码

1.2 新建一个teleport页面

<template>
  <div>
    <!-- <m-dialog></m-dialog> -->
    <div class="mHeader" @click="teleport('.mHeader')">
    </div>
    <div class="mBody" @click="teleport('.mBody')"></div>
    <div class="mFooter" @click="teleport('.mFooter')"></div>
    <div class="test"></div>
    <teleport :to="position" v-if="position">
      <m-dialog></m-dialog>
    </teleport>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import mDialog from "../components/m-dialog.vue";

export default defineComponent({
  name: "",
  setup() {
    let position = ref("");
    let teleport = (element: string) => {
      position.value = element;
      console.log(position.value);
    };

    return {
      position,
      teleport,
    };
  },
  components: {
    mDialog,
  },
});
</script>

<style scoped lang='scss'>
.mHeader {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: red;
}
.mBody{
  position: relative;
  width: 100%;
  height: 400px;
  background-color: yellow;
}
.mFooter {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: pink;
}
</style>
复制代码

效果, 使用teleport标签动态的把元素追加到响应的盒子里面去

二、组件之间的双向绑定

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

vue2是在子组件中this.$emit(‘update:eventName’,value), 父组件:eventName.sync=’value’实现的双向绑定

vue3中:

2.1 新建一个input组件

<template>
  <div>
      <input type="text" @input="handleV">
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: '',
  setup(props,conText) {
      let handleV =(e:any) => {
          console.log(e.target.value);  
          conText.emit('update:modelValue',e.target.value)
      }

      return {
          handleV
      }
  }
});
</script>

<style scoped>

</style>
复制代码

2.2 新建一个父页面

<template>
  <div>
      <m-input v-model="iptV"></m-input>
      <p>{{iptV}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import mInput from '../components/m-input.vue'

export default defineComponent({
  name: '',
  setup() {
      let iptV = ref('')

      return {
          iptV
      }
  },
  components: {
      mInput,
      
  }
});
</script>

<style scoped>

</style>
复制代码

实现v-model

三、在setup中实现路由跳转

由于在setup（）函数中不能使用this，所以要用路由的API进行跳转和接收路由参数，需要使用路由的钩子函数来实现

引入userRouter（）方法获取路由， 之后和vue2中一样的使用方法

<template>
  <div class="home">
    {{msg}}{{sayHello()}}  <br>
    <button @click="goPage('/ref')">去ref页</button>  <br>
    <button @click="goPage('/reactive')">去reactive页</button> <br>
    <button @click="goPage('/toRefs')">去reactive页</button> <br>
    <button @click="goPage('/computed')">去computed页</button> <br>
    <button @click="goPage('/watch')">去watch页</button> <br>
    <button @click="goPage('/life')">去生命周期页</button> <br>
    <button @click="goPage('/dom')">去dom页</button> <br>
    <button @click="goPage('/hook')">去hook页</button> <br>
    <button @click="goPage('/shallow')">去shallow页</button> <br>
    <button @click="goPage('/readonly')">去readonly页</button> <br>
    <button @click="goPage('/row')">去row页</button> <br>
    <button @click="goPage('/toRef')">去row页</button> <br>
    <button @click="goPage('/customRef')">去customRef页</button> <br>
    <button @click="goPage('/provide')">去provide页</button> <br>
    <button @click="goPage('/isResponse')">去isResponse页</button> <br>
    <button @click="goPage('/teleport')">去teleport页</button> <br>
    <button @click="goPage('/model')">去双向绑定页</button> <br>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    let msg = 'hello world'
    function sayHello() {
      return ', 你好 !'
    }
    let router = useRouter()
    let goPage = (path:string) => {
      router.push(path)
    }
    return {
      msg,
      sayHello,
      goPage
    }
  }
});
</script>

复制代码

路由守卫和vue2中一样的使用

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  console.log(from);
  next()
})
复制代码