首页 > 其他分享 >vue通讯的几种方式

vue通讯的几种方式

时间:2023-08-21 10:46:28浏览次数:35  
标签:vue 几种 listeners 通讯 attrs props 组件 emit

1.props 和 $emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。

2. 父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。

3.$refs 获取组件实例。

4.envetBus 兄弟组件数据传递,这种情况下可以使用事件总线的方式。

5. vuex 状态管理

6. $parent 和 $children 获取单签组件的父组件和当前组件的子组件。
7. $attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

标签:vue,几种,listeners,通讯,attrs,props,组件,emit
From: https://www.cnblogs.com/qiuchuanji/p/17645379.html

相关文章

  • MCGS昆仑通态触摸屏与Fx5uPLC以太网无线通讯
    在实际系统中,同一个车间里分布多台PLC,用触摸屏集中控制。通常所有设备距离在几十米到上百米不等。在有通讯需求的时候,如果布线的话,工程量较大耽误工期,这种情况下比较适合采用无线通信方式。本方案以MCGS触摸屏和2台三菱FX5uPLC为例,介绍触摸屏与多台PLC的无线以太网通信实现过程。......
  • 使用VuePress打造的LearnData知识库帮助我更好地学习和传播 - 从笔记到分享
    在当今快节奏的社会中,技术变化日新月异。作为一名技术博客站长,我深切感受到了学习和传播知识的重要性。为了更好地满足读者的需求,我决定采用VuePress搭建一个功能强大且易于维护的知识库平台,名为LearnData。本文将介绍我如何利用VuePress构建LearnData,并展示一些相关的代码示例。......
  • ambari-hadoop集群中timeline和ams-hbase几种服务之间的调用关系
    最近经常碰到ambari集群timelineserver和ams-hbase服务的一些问题,梳理了下这些服务之间的调用关系,留作笔记方便后续查阅1.目前笔者用到的hadoop组件版本如下2.调用关系如下图3.关于timelineserver有两个版本v1.5和v2.03.1目前v1.5为过渡期版本,但是也是生产中应用用......
  • Vue 3 Deep Dive with Evan You
    什么是DOM?如果我们把这个HTML加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如:letitem=document.getElementByTagName('h1')[0]item.textContent="NewHeading"VDOM网页可以有很多DOM节点,......
  • 老杜Vue的Bug列表实战代码
    老杜Vue的Bug列表实战代码谢谢杜老师的vue教学视频,说的真的好好各位亲爱的小伙伴,如果不能使用代码,请给我留言哈。1、效果图2、html代码(我自己写的,和杜老师的有些不同,不要纠结哈,基本是没错的)<!DOCTYPEhtml><html><head><metacharset="utf-8"><tit......
  • vue生命周期
    Vue的生命周期总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。1、beforeCreate(创建前)表示实例完全被创建出来之前,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。2、created(创建后)数据对象data已存在,可以调用methods中的方法,操作data中的数......
  • Vuex有哪几种属性?
    有五种,分别是State、Getter、Mutations、Actions、Modulesstate=>基本数据(数据源存放地)getters=>从基本数据派生出来的数据mutations=>提交更改数据的方法,是同步操作actions=> 用于异步操作和提交mutations,在actions中可以进行任何异步操作,最后再提交到mutations中......
  • Vue-Router 的懒加载如何实现
    非懒加载:importListfrom'@/components/list.vue'constrouter=newVueRouter({routes:[{path:'/list',component:List}]}) 懒加载:1.使用箭头函数+import动态加载constList=()=>import('@/components/list.vue')constroute......
  • Vue CLI脚手架
    1、node_modules依赖包①我们通过项目终端输入npmi,就会生成该依赖包,依赖包会自动根据package.json文件中所有需要的东西进行封装下载,例如:jquery,vue2等等②该依赖包因为承载项目的所有内容,在项目大的时候其所占内存也会很大。③在项目传发时,依赖包是可以删除的,他人只需要输入npmi,......
  • Vue基础语法
    一、插槽1、格式放在子组件<slot>内容</slot>2、内容可以放任何模块的代码3、原理父组件引用时,填写内容会被应用到插槽css模块<style>.box{width:200px;height:200px;background-color:aqua;float:left;margin-right:20px;......