首页 > 其他分享 >总结了 Vue3 的七种组件通信方式，别再说不会组件通信了

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

时间：2023-02-02 10:47:07浏览次数：72  
标签：const list 通信 value Vue3 组件 import ref

总结了 Vue3 的七种组件通信方式，别再说不会组件通信了 播报文章

网格化软件高品伟业

2022-04-19 16:35山东 关注

 

写在前面

 

 

本篇文章是全部采用的 <script setup> 这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档[1]对两种方式的描述。

 

 

本篇文章将介绍如下七种组件通信方式：

 

 

· props

 

 

· emit

 

 

· v-model

 

 

· refs

 

 

· provide/inject

 

 

· eventBus

 

 

· vuex/pinia(状态管理工具)

 

 

开始搞事情~

 

 

举一个栗子

 

 

俗话说的好，学习不写demo，那就是耍流氓~

 

 

本篇文章将围绕下面这个demo，如下图所示：

 

 

上图中，_列表_和_输入框_分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。

 

 

Props方式

 

 

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。

 

 

根据上面的demo，我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染；

 

 

父组件代码如下：

 

 

<template>
<!-- 子组件 -->
<child-components :list="list"></child-components>
<!-- 父组件 -->
<div class="child-wrap input-group">
<input
v-model="value"
type="text"
class="form-control"
placeholder="请输入"
/>
<div class="input-group-append">
<button @click="handleAdd" class="btn btn-primary" type="button">
添加
</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</script>

 

 

子组件只需要对父组件传递的值进行渲染即可，代码如下：

 

 

<template>
<ul class="parent list-group">
<li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
</script>

 

 

emit方式

 

 

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；

 

 

根据上面的demo，我们将列表定义在父组件，子组件只需要传递添加的值即可。

 

 

子组件代码如下：

 

 

<template>
<div class="child-wrap input-group">
<input
v-model="value"
type="text"
class="form-control"
placeholder="请输入"
/>
<div class="input-group-append">
<button @click="handleSubmit" class="btn btn-primary" type="button">
添加
</button>
</div>
</div>
</template>
<script setup>
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">
<li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
</ul>
<!-- 子组件 -->
<child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
// add 触发后的事件处理函数
const handleAdd = value => {
list.value.push(value)
}
</script>

 

 

在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。

 

 

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">
<input
v-model="value"
type="text"
class="form-control"
placeholder="请输入"
/>
<div class="input-group-append">
<button @click="handleAdd" class="btn btn-primary" type="button">
添加
</button>
</div>
</div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from 'vue'
const value = ref('')
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
const emits = defineEmits(['update:list'])
// 添加操作
const handleAdd = () => {
const arr = props.list
arr.push(value.value)
emits('update:list', arr)
value.value = ''
}
</script>

 

 

在子组件中我们首先定义props和emits，然后添加完成之后emit指定事件。

 

 

注：update:*是Vue中的固定写法，*表示props中的某个属性名。

 

 

父组件中使用就比较简单，代码如下：

 

 

<template>
<!-- 父组件 -->
<ul class="parent list-group">
<li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
</ul>
<!-- 子组件 -->
<child-components v-model:list="list"></child-components>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
</script>

 

 

refs方式

 

 

在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

 

 

示例代码如下：

 

 

<template>
<ul class="parent list-group">
<li class="list-group-item" v-for="i in childRefs?.list" :key="i">
{{ i }}
</li>
</ul>
<!-- 子组件 ref的值与<script>中的保持一致 -->
<child-components ref="childRefs"></child-components>
<!-- 父组件 -->
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const childRefs = ref(null)
</script>

 

 

子组件代码如下：

 

 

<template>
<div class="child-wrap input-group">
<input
v-model="value"
type="text"
class="form-control"
placeholder="请输入"
/>
<div class="input-group-append">
<button @click="handleAdd" class="btn btn-primary" type="button">
添加
</button>
</div>
</div>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
defineExpose({ list })
</script>

 

 

setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**<script setup>**中声明的绑定。如果需要**公开需要通过****defineExpose**** API暴露**。

 

 

provide/inject方式

 

 

provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。示例代码如下所示：

 

 

父组件

 

 

<template>
<!-- 子组件 -->
<child-components></child-components>
<!-- 父组件 -->
<div class="child-wrap input-group">
<input
v-model="value"
type="text"
class="form-control"
placeholder="请输入"
/>
<div class="input-group-append">
<button @click="handleAdd" class="btn btn-primary" type="button">
添加
</button>
</div>
</div>
</template>
<script setup>
import { ref, provide } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// 向子组件提供数据
provide('list', list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</script>

 

 

子组件

 

 

<template>
<ul class="parent list-group">
<li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
</ul>
</template>
<script setup>
import { inject } from 'vue'
// 接受父组件提供的数据
const list = inject('list')
</script>

 

 

值得注意的是使用provide进行数据传递时，尽量readonly进行数据的包装，避免子组件修改父级传递过去的数据。

 

 

事件总线

 

 

Vue3中移除了事件总线，但是可以借助于第三方工具来完成，Vue官方推荐mitt[2]或tiny-emitter[3]；

 

 

在大多数情况下不推荐使用全局事件总线的方式来实现组件通信，虽然比较简单粗暴，但是长久来说维护事件总线是一个大难题，所以这里就不展开讲解了，具体可以阅读具体工具的文档

 

 

状态管理工具

 

 

Vuex[4]和Pinia[5]是Vue3中的状态管理工具，使用这两个工具可以轻松实现组件通信，由于这两个工具功能比较强大，这里就不做展示了，具体可以查阅文档

 

 

写在最后

 

 

本篇文章到这就结束了，总的来说比较简单，没有什么复杂内容。

 

 

如果这篇文章对你来说有点作用，欢迎点赞、评论、收藏，避免在需要的时候找不到。

 

 

如果文中有错误，欢迎指正~

 

 

参考资料

 

 

[1]

 

 

Vue文档: https://staging-cn.vuejs.org/guide/introduction.html#api-styles

 

 

[2]

 

 

mitt: https://www.npmjs.com/package/mitt

 

 

[3]

 

 

tiny-emitter: https://www.npmjs.com/package/tiny-emitter

 

 

[4]

 

 

Vuex: https://vuex.vuejs.org/zh/

 

 

[5]

 

 

Pinia: https://pinia.vuejs.org/

标签：const,list,通信,value,Vue3,组件,import,ref
From： https://www.cnblogs.com/sexintercourse/p/17085166.html

相关文章

  • Java Socket通信（一）之客户端程序 发送和接收数据
     JavaSocket通信（一）之客户端程序发送和接收数据网络应用分为客户端和服务端两部分，而Socket类是负责处理客户端通信的Java类。通过这个类可以连接到指定IP或域名的服务......
  • Java中Socket 实现最简单的客户端与服务端通信
    Java中Socket实现最简单的客户端与服务端通信引言：因为最近项目中要接入某通信协议接口，基于TCP/IP的socket接口。于是就在本地弄一个最简单的Socket通信仅供学习。话不多......
  • 最好用的 6 款 Vue 拖拽组件库推荐
    Vue拖拽组件库（drag-and-drop）组件在使用Vue框架开发中非常常见的需求，做个内容行排序，拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的6款Vue拖拽......
  • Blazor入门100天 : 身份验证和授权 (2) - 角色/组件/特性/过程逻辑
    目录建立默认带身份验证Blazor程序`角色/组件/特性/过程逻辑DB改Sqlite将自定义字段添加到用户表脚手架拉取IDS文件,本地化资源freesql生成实体类,freesql管......
  • Vue3 安裝v-viewer
    一、执行命令npminstallv-viewer@next二、在main.js中引入//v-viewer：图片预览、缩放、翻转import'viewerjs/dist/viewer.css'importViewerfrom'v-viewer' ......
  • m基于matlab的光通信的信道估计，均衡，抑制papr误码率仿真,对比ZF,RLS,MMSE三种算法
    1.算法描述可见光通信的信道估计，均衡，抑制papr。不考虑光信道，用传统的无线通信的OFDM的信道估计，均衡，抑制papr信道估计，均衡最好有两个以上的方法比较%本次仿真载频为2GHz......
  • drf之序列化组件
    目录drf之序列化组件序列化与反序列化器序列化器介绍和快速使用基于序列化器劣化和反序列化序列化反序列化基于序列化器编写5个接口（重点）反序列化的校验drf之序列化组件序......
  • drf中-序列化组件
    基于APIView+Response写接口在views.py中fromrest_framework.viewsimportAPIViewfromrest_framework.responseimportResponsefrom.modelsimportBookclass......
  • drf day03 ApiView、Request、结合Response、反序列化组件编写5个接口
    一、APIView执行流程（较难）1.前戏​ 这个是drf提供的，以后我们写视图中的类都继承这个apiview​ rest_framework很规范，需要导啥先点一下，然后后面就可以按开头大写导导入一......
  • 小程序的button组件
    button组件按钮组件功能比html的button按钮丰富可以通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户权限，获取用户信息等）；按钮的属性siz......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99