Vue学习计划-Vue3--Vue3新组件

8.Vue3新组件

1. 【Teleport】

• 什么是Tepeport: – Teleport是一种能够将我们的组件html结构移到到指定位置的技术

比如弹窗，我们在父组件中引入了弹窗，但是由于父的容器加了特殊的css，导致我们弹窗的position:fixed受到了影响，不会以浏览器窗口为基准了，这就不会满足我们的需求，此时就需要用到Teleport

<template>
	<div class="app">
    <button @click="isShow = true">点击弹窗</button>
    <Teleport to='body' >
      <div class="model" v-if="isShow">
        <h2>显示标题</h2>
        <h2>显示内容</h2>
        <button @click="isShow = false">关闭弹窗</button>
      </div>
    </Teleport>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref } from 'vue';
let isShow = ref(false)
</script>
<style>
.app{
  width: 500px;
  height: 600px;
  background-color: aqua;
  filter: saturate(20%); /*此样式就导致position:fixed不会以浏览器窗口为基准了 */
}
.model{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 10%;
  left: 50%;
  width: 200px;
  height: 300px;
  background-color: antiquewhite;
}
</style>

2. 【Suspense】

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
• 使用步骤:
  • 引入异步组件
  • 使用Suspense包裹组件，并配置好default与fallback

父组件

<template>
	<div class="app">
    <button @click="isShow = true">点击弹窗</button>
    <Suspense>
        <!-- <template #default>
            <Child/>
        </template> -->
        <!-- 插槽的形式： default默认是展示要显示的组件内容 -->
        <Child/>
        <!-- fallback表示发送请求过程中展示的内容 -->
        <template #fallback>
            loading...
        </template>
    </Suspense>
	</div>
</template>

<script setup lang="ts" name="App">
import Child from './Child.vue';
import { ref } from 'vue';
let isShow = ref(false)
</script>

子组件

<template>
  <div>
    <h2>数字是{{ num }}</h2>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

let num = ref(0)
// 子组件内使用可以直接使用await, setup()的组件支持async，返回一个Promise, 但是async setup()的组件的呈现必须要使用Suspense包裹
const {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
console.log(content, 'content')
</script>

3. 其他组件如：异步组件defineAsyncComponent等等

4. 【全局API转移到应用对象】

• app.component全局注册组件
• app.config
• app.directive参考Vue2自定义指令或者官网
• app.mount
• app.unmount
• app.use

5. 其他

主要访问vue3迁移指南

• 过渡类名v-enter修改为v-enter-form、过渡类名v-leave修改为v-leave-form
• keyCode作为v-on修饰符的支持
• v-model指令在组件上的使用已经被重新设计，替换掉了v-bind.sync
• v-if和v-for在同一个元素身上使用优先级发生了变化
• 移除了$on、$off和$once实例方法
• 移除了过滤器filter
• 移除了$children实例propert
  …