总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx

总结了 Vue3的七种组件通信方式，别再说不会组件通信了
本篇文章是全部采用的〈script setup＞这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档卬对两种方式的描述。
本篇文章将介绍如下七种组件通信方式:
props emit
v-model
refs
provide/inject
eventBusvuex/pinia（状态管理工具）
开始搞事情〜举一个栗子
俗话说的好，学习不写demo,那就是耍流氓〜
本篇文章将围绕下面这个demo,如下列图所示:
V Ol component-commurwcat X +C ① Iocalho$t8080
JavaScriptHTML
CSS请输入
上图中，一列表.和.输入框一分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所 调整。
Props方式Props方式是Vue中最常见的一种父传子的一种方式，使用也比拟简单。
根据上面的demo,我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染;父组件代码如下:
|<template>| <child-components :list="list"x/child-comp茄茄
| <div class=,,child-wrap input| v・model="商
| <div class="input・group・ap而后| < /1 e m p 1 a
|<script〔import { ref } from '
〔import Childcomponents from './child .讥万〔const value =
〔const handleAdd = () =)1 ] i st . va 1 ue . pu s h (va lue . va lue
| value .value|< / s c r i pt
子组件只需要对父组件传递的值进行渲染即可，代码如下:
<template> | <ul class=Hparent^<l^lass=^lis^rou^RerTr^^or^^r^rops^ist^l<ey=?>{^0}</li^
|< /1 em p 1|<script
〔import { defineProps } from 'v^ 匕onst props =| type: Array
default:
=> []>

</script>emit方式
emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；根据上面的demo,我们将列表定义在父组件，子组件只需要传递添加的值即可。
子组件代码如下:
<template>
<div class="child-wrap input-group”)|v-model="valu/^^M
class="form-control”
^^^<buttor^cMck=^handleSubm^^lass=^tr^tr^rimar/^ype=^button^J < /tempi import { ref, defineEmits } from 'vue const value = ref(*')const emits = defineEmits(['add'])
const handleSubmit =()=>
emits('add', value.value)
value.value =|</script>|
在子组件中点击【添加】按钮后，emit一个自定义事件，并将添加的值作为参数传递。
父组件代码如下:
<template>
--父组件-->
<ul class="parent list-group”>|I <li class="list・group-item“ v-for="i in list” ：key="i”>{{ i
| <child-components gadd=',handleAdd,,></child-components>^^^^^^^^^M|< /1 e m p 1
|<script〔import { ref } from '
〔import Childcomponents from ' ./child.讥后|const handleAdd =
| list. value . push (|< / s c r i p t
在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。
v-model 方式v-model是Vue中一个比拟出色的语法糖，就比方下面这段代码
|<ChildComponent v・model:title="pageTitle” />就是下面这段代码的简写形势
〈Childcomponent :title="pageTitle” @update:title="pageTitle = $event" />|v-model确实简便了不少，现在我们就来看一下上面那个demo,如何用v-model实现。
子组件<template>|
<div class="child-wrap input-group">
v-modelJ'value^^^B
class="form-control"

〈div class="input-group-append")
〈button @click="handleAdd“ class="btn btn-primary“ type="button”>
</button>|
</div>
|</template>^B |〈script setup)〔import { ref, defineEmits, defineProps } from 'vue const props = defineProps({

type: Arra
default: () => 口，const emits = defineEmits([1 update:list1])
//添加操彳const handleAdd =()=>{
const arr = props ,list| arr.push(value.value)，
emits('update:list' am
value.value ='</script>
在子组件中我们首先定义props和emits,然后添加完成之后emit指定事件。
注：update:*是Vue中的固定写法，*表示props中的某个属性名。 父组件中使用就比拟简单，代码如下：
|< template| <ul class="parent
| <child-components v-model:list=',list,,x/child-components>^^^^^^^M|< /1 em p 1
|<script〔import { ref } from '
〔import Childcomponents from 'refs方式在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API 中就无法使用哪种方式获取°如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的
Ref对象，在组件挂载后就可以访问了。
例如代码如下:
|< t emp 1 a t e| <ul class="parent
|〈child-components ref="childRefs"></child-componen6^^^^^^^^^^M|< /tempi
|<script〔import { ref } from '
〔import Childcomponents from ' ./childEon st childRefs = ref
</script>子组件代码如下:
<template>
<div clLSS="child・wrap input・group”>|
<input
v-model="value"
type="text
class="form-control"
placeholder："请输入"

andleAdd" class="btn btn-primary" type="button">
〈div class="input-
<button @click="|< /1 em p 1 a
|<script〔import { ref, defineExpose } from
Eon st value =const handleAdd

const handleAdd
=>

list.value.push(value.value
value.value ='setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**〈script setup〉**中声明的绑定。如果需要**公开需要通过****defineExpose**** API暴露**。
provide/inject 方式provide和inject是Vue中提供的一对API,该API可以实现父组件向子组件传递数据，无论层级有 多深，都可以通过这对API实现。例如代码如下所示：
父组件|<t emplat e
| 〈child-componentsx/child-components)| <div class=,,child-wrap input-group11^!
|v-model="不|class-form-contr^T^^^^^^^^^B

<button @click=',handleAdd,' class—btn btn-primary“ type=',button,>>|<script setup>
import { ref. provide } from 'vue〔const list = ref (['JavaScript', 'HTML', 'CSS'R
|const value 二// add触发后的事件处理函数
onst handleAdd =()=>{
list.value.push(value.value)
value.value =</script>
子组件<template
<ul class="parent< /1 e m p 1
〔import { inject } from 'vue值得注意的是使用provide进行数据传递时，尽量readonly进行数据的包装，防止子组件修改父级传 递过去的数据。
事件总线Vue3中移除了事件总线，但是可以借助于第三方工具来完成,Vue官方推荐mittM或tiny・emitterl3］；
在大多数情况下不推荐使用全局事件总线的方式来实现组件通信，虽然比拟简单粗暴，但是长久来说 维护事件总线是一个大难题，所以这里就不展开讲解了，具体可以阅读具体工具的文档状态管理工具
Vuex⑷和Pinia⑸是Vue3中的状态管理工具，使用这两个工具可以轻松实现组件通信，由于这两个 工具功能比拟强大，这里就不做展示了，具体可以查阅文档