广告
返回顶部
首页 > 资讯 > 精选 >vue组件通信有哪几种方式
  • 534
分享到

vue组件通信有哪几种方式

2024-04-02 19:04:59 534人浏览 独家记忆
摘要

Vue中组件通信的方式有:1.使用props/$emit实现父子组件通信;2.使用$refs/$parent/$children/$root实现父子组件通信;3.使用$attrs/$listener实现隔代组件通信;4.使用provide/

Vue中组件通信的方式有:1.使用props/$emit实现父子组件通信;2.使用$refs/$parent/$children/$root实现父子组件通信;3.使用$attrs/$listener实现隔代组件通信;4.使用provide/inject实现隔代组件通信;5.使用Vuex实现父子、隔代、兄弟组件通信;6.使用eventBus实现父子、隔代、兄弟组件通信;

vue组件通信有哪几种方式

具体方法如下:

使用props/$emit实现父子组件通信

props:props是用于接收来自父组件通过v-bind传递的数据,当props为数组时,直接接收父组件传递的属性;当props为对象时,可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。

$emit:在进行父子组件通信时,可以使用$emit来触发父组件v-on在子组件上绑定相应事件的监听。

使用$refs/$parent/$children/$root实现父子组件通信

$refs:可以将$refs绑定DOM元素,在获取DOM元素的attributes属性,也可以将$refs绑定子组件,从而获取子组件实例。

$parent:vue中可以直接通过this.$parent来获取当前组件的父组件实例。

$children:vue中可以直接通过this.$children来获取当前组件的子组件实例的数组。

$root:在获取当前组件树的根vue实例时,若当前实例没有父实例,可以通过$root实现组件之间的跨级通信。

使用$attrs/$listener实现隔代组件通信

$attrs:$attrs是用来接收父作用域中不作为prop被识别的attribute属性,且可以通过v-bind="$attrs"传入内部组件,常用于创建高级别的组件。

$listeners:$listeners中包含了父作用域中的 v-on 事件监听器,可以通过可以通过 v-on="$listeners" 传入内部组件,常用于创建更高层次的组件。

使用provide/inject实现隔代组件通信

provide:provide是一个对象或是一个返回对象的函数,其对象包含可注入其子孙的property,即要传递给子孙的属性和属性值。

injcet:当injcet为字符串数组时,接收的属性会由data变成provide中的属性;当injcet为为对象时,可以通过配置default和from等属性来设置默认值,在子组件中使用新的命名属性等。

使用Vuex实现父子、隔代、兄弟组件通信

Vuex是一个vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,当组件从store中读取状态的时,若store中的状态发生变化,相应的组件也会得到高效更新。

使用eventBus实现父子、隔代、兄弟组件通信

eventBus是事件总线,是注册一个新的vue实例,在调用这个实例的$emit和$on等来监听和触发这个实例的事件,通过传入参数从而实现组件的全局通信。

--结束END--

本文标题: vue组件通信有哪几种方式

本文链接: https://www.lsjlt.com/news/110519.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue组件通信有哪几种方式
    vue中组件通信的方式有:1.使用props/$emit实现父子组件通信;2.使用$refs/$parent/$children/$root实现父子组件通信;3.使用$attrs/$listener实现隔代组件通信;4.使用provide/...
    99+
    2022-10-22
  • Vue组件间通信有哪几种方式
    这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式?Vue 组件间通信是面试常考的知识点...
    99+
    2022-10-19
  • Vue实现组件间通信的几种方式(多种场景)
    目录1、Props 父 >>> 子  (Props)子 >>> 父 ($emit)2、Bus事件总线3、V...
    99+
    2022-11-12
  • vue组件通信方式有哪些
    vue中实现组件通信的方式有:1.通过props传递实现组件通信;2.使用ref设置父子组件实现组件通信;3.使用parent创建兄弟组件通信侨联实现组件通信;4.使用provide与inject定义祖后代组件实现组件通信;vue中实现组件...
    99+
    2022-10-17
  • vue 组件通信的多种方式
    目录前言一、vuex二、eventBus三、props/emit四、$parent/$children五、$attrs/$listeners六、provide/inject前言 在v...
    99+
    2022-11-13
  • vue中有哪些组件通信方式
    这篇文章将为大家详细讲解有关vue中有哪些组件通信方式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. props和$emit这是最最常用的父子组件通信方...
    99+
    2022-10-19
  • vue组件之间通信方式有哪些
    这篇文章将为大家详细讲解有关vue组件之间通信方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:对于vue来说,组件之间的消息传递是非常重要的,下面是我对...
    99+
    2022-10-19
  • Vue中的组件通信方式有哪些
    Vue中的组件通信方式有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。vue组件中关系说明:如上图所示, A与B、A与C、...
    99+
    2022-10-19
  • linux进程间的通信方式有哪几种
    这篇文章主要介绍“linux进程间的通信方式有哪几种”,在日常操作中,相信很多人在linux进程间的通信方式有哪几种问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”linux进程间的通信方式有哪几种”的疑惑有所...
    99+
    2023-06-20
  • Vue常用的组件通信方式有哪些
    本篇文章和大家了解一下Vue常用的组件通信方式有哪些。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。组建通信的基本模式:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子...
    99+
    2023-06-14
  • vue引用组件的几种方式
    vue引用组件有3种方式:1、通过v-model或者.sync显式控制组件显示隐藏;2、使用js代码进行引用组件;3、使用Vue指令进行引用组件。具体分析如下:Dialog我习惯把这个东西叫做对话框,实际上还有叫做modal(弹窗)组件的 ...
    99+
    2022-10-15
  • 深入了解Vue组件七种通信方式
    目录1.props/$emit简介代码实例2.v-slot简介代码实例3.$refs/ $parent/$children/$root简介代码实例4.$attrs/$listener...
    99+
    2022-11-12
  • Vue组件之间四种通信方式详解
    目录前言父子组件通信​父组件与子孙组件的通信​父组件获取子组件数据​无需考虑组件关系的通信​前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组...
    99+
    2022-11-12
  • Vue实现组件间通信的方式有哪些
    本篇内容主要讲解“Vue实现组件间通信的方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue实现组件间通信的方式有哪些”吧!1、Props 父 >>> 子&...
    99+
    2023-06-25
  • vue中有哪些实现组件通信的方式
    本篇文章给大家分享的是有关vue中有哪些实现组件通信的方式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。vue组件中关系说明:如上图所示, A...
    99+
    2022-10-19
  • vue3组件通信的几种方式分别是这样的
    vue3组件通信的几种方式分别是这样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。vue3组件通信方式为以下几种props$emit$expose / ref$attrsv-...
    99+
    2023-06-22
  • vue自定义组件的注册方式有几种
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。创建项目通过 cmd 执行如下示例命令来初始化我们的 Vue 项目vue create helloworld cd helloworld code . npm run s...
    99+
    2023-05-14
    Vue
  • Vue组件通信传递数据的三种方式
    目录Vue传值传递数据的三种方式方式一方式二方式三Vue传值 Vue.js是一个组件化的前端开发框架,支持父子组件之间的消息传递和数据通信。子组件向父组件传递消息的过程称为&ldqu...
    99+
    2023-05-17
    Vue组件通信几种方式 Vue组件通信实现
  • Vue组件间怎么通信?六种方式浅析
    Vue组件间怎么通信?下面本篇文章给大家介绍一下Vue组件通信的六种方式,希望对大家有所帮助!组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有几种关系.针对...
    99+
    2023-05-14
    组件通信 前端 Vue.js
  • vue中实现组件间通信的方式有哪些
    这篇文章给大家介绍vue中实现组件间通信的方式有哪些,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。方法一、 props / $emit父组件A通过props的方式向子组件B传递,B t...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作