Vue3新特性体验--下（各式各样API，完结篇）

msg

}

}

}

页面效果，正常展示

注意：inject获取到对应的provide，则第一个字段值必须一致，如该例中的“fromHW”。

这时候Child已经拿到HelloWorld中传递下来的消息，那么反过来呢，Child向HelloWorld传递消息在Vue2中，一种常用方式是事件总线Bus实现跨组件通信

Vue组件间的通信方式（多种场景，通俗易懂，建议收藏）_前端菜小白leo的博客-CSDN博客

但是在Vue3中移除了$on、$off、$once，导致无法使用Bus，但是官方推荐的另外一种取代方案，原理跟Bus一样，那就是mitt.js。

mitt.js

安装mitt

npm i mitt -s

新建mitt.js

import mitt from ‘mitt’

const emitter = mitt();

export default emitter;

开始使用mitt.js

Child.vue

我是Child组件

{{msg}}

<button @click=“changeMsg”>发送消息

HelloWorld.vue

我是vue3项目

我是HelloWorld组件

{{msg}}

点击按钮，实现Child向HelloWorld发消息

注意：与provide和inject注意点一致，触发和监听的字段需一致，才能达到指定的通信效果，如该例中的“fromChild”。

既然跨层级组件之间能使用这两种方式，父子组件当然也可以使用。

Teleport

提供一种方法，可以让一个模板插入到该组价或者父组件外的html标签（很可能是body）里面，可以称它为穿梭门。

未使用teleport时：

我是Child组件

{{msg}}

<button @click=“changeMsg”>发送消息

Child未使用teleport

看下页面元素结构

试着使用teleport，穿梭到body

我是Child组件

{{msg}}

<button @click=“changeMsg”>发送消息

Child使用teleport

Suspense

官网对其解释

我们有时候想在加载异步组件时渲染一些后备内容（比如loading等），就可以使用suspense，让我们可以优化用户体验。

首先，对Child.vue进行修改，模拟异步加载组件

我是Child组件

{{msg}}

然后修改父组件B.vue，使用Suspense，其有两个插槽，它们都只接收一个直接子节点，default插槽里的节点会尽可能展示出来。如果不能，则展示fallback插槽里的节点。

我是B组件

正在加载，请稍后…

B组件在加载时，因为Child为异步组件，因此这个时候suspense插槽default无法展示，此时先展示fallback里面的内容。

模拟两秒后（setTimeout） ，Child组件加载完毕，则suspense显示插槽default中的内容。

重要的是，异步组件不需要作为suspense的直接子节点。它可以出现在组件树任意深度的位置，且不需要出现在和suspense自身相同的模板中。只有所有的后代组件都准备就绪，该内容才会被认为解析完毕。如下，当Child加载完毕，“显示完成”才一起出现。

我是B组件

显示完成

正在加载，请稍后…

将 <suspense> 跟  和  组件相结合是常见的情形。这些组件的嵌套顺序对于它们的正确工作很重要。更多详细内容请参考官方文档：

Suspense | Vue.jshttps://v3.cn.vuejs.org/guide/migration/suspense.htmlv-model 与 v-bind.sync

v-model | Vue.js

语法糖script setup

尽管现在setup使用起来比较方便，但是可以发现一些地方，组件都已经引入了还需要注册，而且当一个组件的数据和方法过多时，需要return很多行，代码量可能会很多。Vue3提供一个语法糖script setup，即在script加入setup，可以不用return，template也可以获取到。

将HelloWorld.vue改成script setup的形式

修改前：

修改后代码量少了许多：

我是vue3项目

我是HelloWorld组件

{{msg}}

验证页面显示正常，无警告，无报错。

但是没有了setup函数，那么props，emit，attrs该如何获取呢，就要介绍一下新的语法了。setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmits和useContext。

defineProps：用来接收父组件传来的值props。

defineEmits：用来声明触发的事件表。

useContext：用来获取组件上下文context。

HelloWorld.vue

我是vue3项目

<B msg=“props传递的消息” @changeB=“handleClick”/>

我是HelloWorld组件

{{msg}}