最全Vue3中组件的通讯方式都整理好了,面试不怕,工作不怕,建议收藏

简介: 最全Vue3中组件的通讯方式都整理好了,面试不怕,工作不怕,建议收藏

"内心极度不渴望的东西,它不可能靠近你,心不唤物,物不至,若没有强烈的渴望,就看不到办法,成功就不会向我们靠近"

--出自《稻盛和夫给年轻人的忠告》

前言

Vue中的组件通讯可以是说是工作常用,面试必问的知识点了,其中包括了父子组件之间的通讯和兄弟组件之间的通讯,有的时候还会有和根组件之间的通讯。无论哪个模式的通讯,都离不开以下几点:

  1. 通过props和emit
  2. 通过provide和inject
  3. 通过EventBus
  4. 通过Vuex或者Pinia状态管理
  5. 通过refs

今天我们就来细说一下这几点通讯方式,让大家真正掌握在Vue中组件的通讯方式,方便大家在工作或者面试中所向无敌


prpos和emit

通过props和emit进行通讯是父子组件中最常用的通讯方式了,方便,简单,好理解。但是要注意一个地方就是:单向数据流原则不能破坏。

props和emit可以进行单独的使用,而不是一定要组件在一起使用,父组件可以通过props给子组件进行传递数据,但是子组件不是更改数把,只能进行读取,这就是单向数据流的概念。简单看一下例子,很简单不多说。

props一般用于父组件给子组件传递数据

"内心极度不渴望的东西,它不可能靠近你,心不唤物,物不至,若没有强烈的渴望,就看不到办法,成功就不会向我们靠近"
--出自《稻盛和夫给年轻人的忠告》
01
前言
Vue中的组件通讯可以是说是工作常用,面试必问的知识点了,其中包括了父子组件之间的通讯和兄弟组件之间的通讯,有的时候还会有和根组件之间的通讯。无论哪个模式的通讯,都离不开以下几点:
通过props和emit
通过provide和inject
通过EventBus
通过Vuex或者Pinia状态管理
通过refs
今天我们就来细说一下这几点通讯方式,让大家真正掌握在Vue中组件的通讯方式,方便大家在工作或者面试中所向无敌图片图片
02
props和emit
通过props和emit进行通讯是父子组件中最常用的通讯方式了,方便,简单,好理解。但是要注意一个地方就是:单向数据流原则不能破坏。
props和emit可以进行单独的使用,而不是一定要组件在一起使用,父组件可以通过props给子组件进行传递数据,但是子组件不是更改数把,只能进行读取,这就是单向数据流的概念。简单看一下例子,很简单不多说。
props一般用于父组件给子组件传递数据

emit一般用于子组件给父组件传递数据

// 子组件的定义
<template>
<div>
<button @click="changName">改名字</button>
<div>
</template>
<script>
export default {
  // 接收传递数据
  props: {
    name: {
      type: Array,
      default: () => ({})
    }
  },
  mounted() {
    console.log(this.name) // parent name
  },
  methods: {
    changeName() {
      this.$emit('changeName', 'child changed name')
    }
  }
}
</script>
// 父组件的定义
<template>
<div>
<Child :name="name" @changeName="onChangeName"></Child>
<div>
</template>
<script>
export default {
  data() {
    return {
      name: 'parent name'
    }
  },
  methods: {
    onChangeName(newName) {
      this.name = newName
    }
  }
}
</script>

props 和 emit 总起来说比较简单,大家简单看一下就好,注意在Vue3中setup的使用方式有些区别,注意一下


provids和inject

provide和inject相信大家应该用的比较少,还不如其它方式用的比较多。

这种方式主要是解决:

"当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。

对于这种情况,我们可以使用一对 provideinject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。"

试想一下这个场景:某个组件下面有10个子组件,这10个组件下面又可能每个组件有10个子组件,以次类推。如果这些子组件都需要依赖最上面父组件的某个数据,通过props一级级的传递也可以实现,但是这样做太麻烦,也没有人会这样用所以provide和inject就可派上用场了,我们只需要在最上面的父组件中把某个数据暴露提供出去,再在子组件中注入一下就好,这样每个子组件就可以用到父组件的数据,而不用一级级的传递。

看一下官方的例子,理解一下具体的用法是怎么样的

app.component('todo-list', {
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})
app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
  }
})

eventBus

相信大家都应该用过这种方式,在Vue最早的时候用的是: new Vue() 来充当消息总线。现在应该没有这么用的了,这里给大家介绍两个比较好用的第三方插件库吧:

1. tiny-emitter

2. pubsub

具体的用法还请各位小主移步到具体官网查看。无非就是

$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),

这几个API的使用方式


Vuex或者Pinia状态管理

状态管理大家应该都很熟悉,之前用的比较多的是Vuex,把整个系统的状态管理都集中管理起来,由单一的获取入口和操作入口,一个地方更改,其它的依赖都会做出响应改变。

关于Vuex的用法个人觉得不是很好用,理解起来也比较费劲,尤其是在有 module 的情况下,层层嵌套很是不优雅,这里推荐大家使用一个新的状态管理工具Pinia,同一团队打造,简单的api使用起来更加顺手。

4edc953e2c684bbe819ffa954c899c08.png


refs

如果我们想要获取子组件的实例,并且调用其中的方法,就可以用到refs了,通过refs我们可以拿到组件实例进而调用方法实现某些功能。

这种方式平时大家用的也比较多,这里也不多介绍了,只需要知道这种方式也是组件间通讯方式的一种就可以啦。

相关文章
|
6天前
Vue3——基于tdesign封装一个通用的查询组件
Vue3——基于tdesign封装一个通用的查询组件
31 3
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
|
4天前
|
Java
面试官:OpenFeign十大可扩展组件你知道哪些?
这篇文章是关于OpenFeign框架的可扩展组件的讨论,作者分享了自己在面试中遇到的相关问题,并回顾了OpenFeign源码,列出了十大组件,包括日志、解码器、重试组件等,并展示了如何使用FeignClient注解和@EnableFeignClients注解来实现远程RPC调用。
面试官:OpenFeign十大可扩展组件你知道哪些?
|
5天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
38 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
10天前
|
JavaScript 前端开发 API
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
|
4天前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
5天前
|
JavaScript 容器
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
这篇文章通过代码示例和项目目录结构图,介绍了如何在Vue脚手架中使用组件来实现一个产品列表页。文章详细展示了组件的编写、引入、注册和使用步骤,并提供了实际效果截图。同时,文章还友情提示读者需要使用Vue脚手架来完成这些操作。
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
|
5天前
|
JavaScript 程序员
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
这篇文章通过代码示例和效果图,详细阐述了Vue中组件的嵌套使用,包括创建组件、组件间的嵌套、注册组件以及实现的效果。同时,文章还介绍了VueComponent的相关知识,包括组件实例对象和Vue实例对象的区别。
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
|
5天前
|
JavaScript 容器
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
这篇文章讲解了Vue中组件的基本使用方法,包括组件的定义、注册和使用过程,并通过代码实例演示了非单文件组件的创建和使用,同时指出了一些使用组件时的注意事项。
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
|
10天前
|
Web App开发 JavaScript 前端开发
不光好上手,功能还特强的 Vue 3组件!且开源免费!
不光好上手,功能还特强的 Vue 3组件!且开源免费!