首页 > 其他分享 >vue组件之间的数据传递

vue组件之间的数据传递

时间:2023-06-13 20:12:47浏览次数:32  
标签:vue 在子 通过 传递 事件 组件 inject

一、组件之间的关系

  父子关系、兄弟关系、跨级关系

二、父子之间数据传递

1、父组件向子组件传递【使用 props】  

  • 第一步:在父组件中使用子组件时,给子组件绑定属性
  • 第二步:在子组件中使用props接收绑定的属性值

2、子组件向父组件传递【使用 $emit】

  • 第一步:在子组件中通过$emit触发指定的事件,同时传值
  • 第二步:在父组件中给子组件v-on监听事件,同时接收子组件传来的值
 3、通过 ref 属性给子组件设置一个名字.
  • 父组件通过组件名来获得子组件
  • 子组件通过parent 获得父组件
  • $refs绑定触发子组件的方法或者获得数据

父组件

子组件

4、使用 provide / inject

  • 在父组件中通过 provide提供变量
  • 在子组件中通过 inject 来将变量注入到组件 中
  • 只要调用了 inject 那么就可以注入 provide中的数据

三、兄弟之间传递数据

1、eventBus事件总线(on)

  • 本质:是通过创建一个空的 Vue 实例来作为消息传递的对象
  • 通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递
  • 事件总线就相当于一个桥梁,不用组件通过它来通信 使用步骤如下:
    • 创建事件中心管理组件之间的通信
    • 发送事件
    • 接收事件

2、通过 refs 来获取到兄弟组件,也可以进行通信

四、跨级之间传递数据

1、使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件

 

标签:vue,在子,通过,传递,事件,组件,inject
From: https://www.cnblogs.com/le-cheng/p/17478615.html

相关文章

  • vue路由
    1、在dos窗口下安装npminstallvue-router@3--save-dev--registry=http://registry.npmmirror.com2、配置路由①在src目录下面,新建router文件夹②然后再其中创建index.js路由文件、index.js代码importVuefrom'vue'//导入路由插件importVueRouterfrom'......
  • 【vue】前端下载文件自定义文件名称
    【vue】前端下载文件自定义文件名称https://blog.csdn.net/weixin_48200589/article/details/125067618下载文件自定义文件名称文件下载名称不想和后端提供的URL一样怎么办呢?1.首先给按钮去绑定一个事件2.正常我们的下载处理方式3.自定义下载的文件名字文件下载名称......
  • Vue3
    目录一vue3介绍1Vue3的变化1.1性能的提升1.2源码的升级1.3拥抱TypeScript1.4新的特性2组合式api和配置项api3vue3之vue实例4创建vue3项目4.1使用vue-cli创建4.2使用vite创建5setup6响应式6.1ref函数6.2reactive函数7reactive与ref对比8计算,监听属性8.1监......
  • 脚本组件界面布置
    脚本组件界面布置usingUnityEngine;publicclassJuse:MonoBehaviour{[Header("TypeOne")]//标题组名publicHusedis;publicGameObjectcia;publicGameObjectdia;[Space(50)]//两行之间间隙大小publicintdes;[Tooltip("Thisis......
  • Vue-watch-deep 深度监听
    首先明确一个概念,Vue是可以监听到多层级数据改变的,且可以在页面上做出对应展示。但是Vue提供的watch方法,默认是不提供深度监听的(deep默认为false,也就是不开启深度监听)(刚挂载的时候是不执行的,只有挂载完成之后的变化才会执行。如果我们想要初次挂载的时候就l执行,则需......
  • vue 的双向绑定原理(vue 的响应式原理)流程
    一、原理 二、流程第一步,“数据劫持”vue2.x用Object.defineProperty()方法来实现数据劫持,为每个属性分配一个订阅者集合的管理数组depvue3.x用ES6的Proxy构造函数来实现数据劫持。第二步,“添加订阅者”在编译的时候在该属性的数组dep中添加订阅者添加方......
  • vue3进阶——组件基础
    组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构,这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。定义组件当使用构建步骤时,我们一般......
  • vue中computed的详细讲解
    1.定义    computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新2.用法    一般情况下,computed默认使用的是getter属性  3.computed的响应式依赖(缓存)1.computed的每一个计算属性都会被缓存起来,只要计......
  • Vue项目优化
    一、代码层面优化(1)v-if和v-show区分使用场景v-if和v-show的区别区别v-ifv-show手段动态的向DOM树内添加或者删除DOM元素通过设置DOM元素的display样式属性控制显隐编译过程有一个局部编译/卸载的过程是简单的基于css切换编译条件初始条件为假,则什么也不......
  • vue WebUploader 分片上传
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。这次项目的需求:支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全浏览器,并且刷新浏览器后仍然能够续传,重启浏览器(关闭......