位置: IT常识 - 正文

uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)(uniapp和vue哪个好)

编辑:rootadmin
uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex) 前言

推荐整理分享uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)(uniapp和vue哪个好),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue+uniapp,vue3 uniapp,vue+uniapp,uniapp和vue的区别,uniapp与vue的关系,uniapp与vue,vue+uniapp,vue+uniapp,内容如对您有帮助,希望把文章链接给更多的朋友!

在做vue项目或者uniapp开发微信小程序时,经常会用到组件之间传值,因此想总结记录下。

一、父子传值父向子传递:props子向父传递:通过 events($emit)父组件想调用子组件的方法:通过 this.$refs(ref)

a)ref 用在组件可以调用组件的属性方法 b)ref 用在标签可以对标签进行操作 c) ref属性不能用在uniapp的内置组件上面,只能用在自定义组件上面;用在内置组件比如<view>标签,this.$refs.xxx获取dom是undefind

父组件调用子组件的方法

// 父组件<template> <view> <view class="index-goods-list-con"> <WaterfallList ref="waterFallCon" :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset" @clickCard="onClickCard" @handleGood="handleGood" @done="onDone" ></WaterfallList> </view> </view></template><script>import WaterfallList from '@/components/waterfall/waterfall-list.vue'export default { data() { return {} }, methods: { handleDailyBestGood(e, good) { // 用$refs赋值调用子组件的handleDailyBestNum方法 this.$refs.waterFallCon.handleDailyBestNum(good) }, },}</script><style></style>// 子组件<template></template><script>export default { data() { return { renderBasic: '' } }, methods: { //父组件调用的方法 handleDailyBestNum(good) { //good 是父组件弹窗传递过来的值,我们可以打印看看 console.log(good) this.renderBasic = good }, },}</script>二、兄弟传值

借助中间代理, $emit 和 $on 比如在uniapp项目中使用兄弟传值,vue同理 uniapp页面通讯官方文档

a) 说明

b) 使用场景

在商品下单页点击选择优惠券,进入优惠券页面,选择一张适合的,再返回下单页,需要带着优惠券id返回,现在商品 提交订单页和优惠券页面是 跨页面 的。

uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)(uniapp和vue哪个好)

c) 使用方法

//优惠券页面 clickCoupon (item) { if (this.orderSource) { // 触发全局自定义事件,传参id uni.$emit('updateData', item.id) uni.navigateBack({ delta: 1}) } }, // 从优惠券跳回下单页 // 监听全局自定义事件updateData,接收参数id uni.$on('updateData', async function (couponId) { that.couponId = couponId })

d) 注意事项

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听。注意 uni.$on 定义完成后才能接收到 uni.$emit 传递的数据三、祖孙或者更深嵌套的组件间传值: provide/inject

a) 类型

provide:Object | () => Objectinject:Array<string> | { [key: string]: string | Symbol | Object }

b) 详细

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。inject 选项应该是: 一个字符串数组,或一个对象提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

c) 使用场景

如果要将祖先组件直接传递给孙子组件,我们要将props逐级传递下去:祖先组件 =》子组件 =》孙子组件,而通过provide/inject,可直接从祖先组件传给孙子组件,即使再嵌套多层也没关系。 d) 使用方法

<template> <div> <button @click="changeMsg">祖组件触发</button> <h1>祖组件</h1> <parent></parent> </div></template><script>import parent from './parent.vue';export default { data(){ return{ obj:{ name:'JavaScript', }, developer:'布兰登·艾奇', year:1995, update:'2021年06月', } }, provide(){ return { obj: this.obj, // 方式1.传入一个可监听的对象 developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值 // developerFn: this.getDeveloper, 方式3.或者调用一个方法,也能实现响应式 year: this.year, // 方式4.直接传值 app: this, // 方式5. 提供祖先组件的实例 缺点:实例上挂载很多没有必要的东西 比如:props,methods。 } }, components: { parent, }, methods:{ getShowCartValue() { return this.developer }, changeMsg(){ this.obj.name = 'Vue'; this.developer = '尤雨溪'; this.year = 2014; this.update = '2021年6月7日'; }, },}</script>

子组件

<template> <div class="wrap"> <h4>子组件(只做中转)</h4> <child></child> </div></template><script>import child from './child.vue';export default { components:{ child, },}</script>

孙组件

<template> <div> <h5>孙组件</h5> <span>名称:{{obj.name}}</span> | <span>作者:{{developer}}</span> | <span>诞生于:{{year}}</span> | <span>最后更新于:{{this.app.update}}</span> </div></template><script>export default { computed:{ developer(){ return this.developerFn() } }, inject:['obj','developerFn','year','app'],}</script>

未点击按钮,原有状态 当点击按钮触发 changeMsg 方法后,效果如下: 对比一下前后差异:无论点击多少次,孙组件中的诞生于 year 字段永远都是1995 并不会发生变化,通过 方式1、方式2、方式3、方式5传值是可以响应的。

正是官网所提到的:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

注意: 1)另外如果孙子组件更改祖先组件传来的值,会发现祖先组件的值也会跟着变,所以慎用 provide / inject; 2)Vuex 和 provide/inject 最大的区别:Vuex 中的全局状态的每次修改是可以追踪回溯的,而 provide/inject 中变量的修改是无法控制的。换句话说,不知道是哪个组件修改了这个全局状态。

所以对于业务庞大而复杂的,还是建议使用vuex~

四、更复杂的结构:vuex

请移步看我之前写的关于vuex使用总结文章,学习笔记之Vuex总结(Vue状态管理)

参考: provide、inject例子讲解参考这个

本文链接地址:https://www.jiuchutong.com/zhishi/299082.html 转载请保留说明!

上一篇:大二C#实现酒店管理系统(C端展示、前台操作、登记入住、入住管理、职位管理、公告系统等)(c语言设计酒店管理系统)

下一篇:ChatGPT中文版重装上阵(chatbot下载)

  • 怎么获得小红书曝光奖励(怎么获得小红书流量)

    怎么获得小红书曝光奖励(怎么获得小红书流量)

  • 华为日历怎么显示节假日休假信息(华为日历怎么显示农历)

    华为日历怎么显示节假日休假信息(华为日历怎么显示农历)

  • oppok9s能开空调吗(oppor9手机能开空调)

    oppok9s能开空调吗(oppor9手机能开空调)

  • 华为p40支持40w充电器吗(华为p40支持多少w充电)

    华为p40支持40w充电器吗(华为p40支持多少w充电)

  • 小米6可以换电池吗(小米6换电池教程视频)

    小米6可以换电池吗(小米6换电池教程视频)

  • 骁龙675和835差多少(骁龙675cpu有835好吗)

    骁龙675和835差多少(骁龙675cpu有835好吗)

  • m1901f7e红米啥型号(红米m1901f7c)

    m1901f7e红米啥型号(红米m1901f7c)

  • 苹果手机云上贵州运营自动扣费怎么关闭(苹果手机云上贵州有什么用)

    苹果手机云上贵州运营自动扣费怎么关闭(苹果手机云上贵州有什么用)

  • 内存影响游戏帧数吗(内存影响游戏帧率吗)

    内存影响游戏帧数吗(内存影响游戏帧率吗)

  • 华为手机拍照怎么显示手机型号(华为手机拍照怎么显示地理位置和时间)

    华为手机拍照怎么显示手机型号(华为手机拍照怎么显示地理位置和时间)

  • 华为手机多任务窗口怎么开启(华为手机多任务管理界面锁定)

    华为手机多任务窗口怎么开启(华为手机多任务管理界面锁定)

  • cad2020不显示激活页面(cad2014不显示激活)

    cad2020不显示激活页面(cad2014不显示激活)

  • 锂电池充电器2a和3a的区别(锂电池充电器2a和3a换着充可以吗)

    锂电池充电器2a和3a的区别(锂电池充电器2a和3a换着充可以吗)

  • 为什么抖音拍同款显示网络不给力(为什么抖音拍同款音乐不完整)

    为什么抖音拍同款显示网络不给力(为什么抖音拍同款音乐不完整)

  • iphone11pro与pro max区别(iphone11pro与promax)

    iphone11pro与pro max区别(iphone11pro与promax)

  • 抖音可以定位找人吗(抖音可以定位找回吗)

    抖音可以定位找人吗(抖音可以定位找回吗)

  • 腾讯视频的弹幕设置在哪(腾讯视频的弹幕怎么开)

    腾讯视频的弹幕设置在哪(腾讯视频的弹幕怎么开)

  • 华为nova3i支持nfc功能吗(华为nova3i支持电信高清通话吗)

    华为nova3i支持nfc功能吗(华为nova3i支持电信高清通话吗)

  • 快手怎么设置不允许关注(快手怎么设置不让别人看我关注的人)

    快手怎么设置不允许关注(快手怎么设置不让别人看我关注的人)

  • 手机通话不开免提没声音怎么办(手机通话不开免提别人听不到我说话)

    手机通话不开免提没声音怎么办(手机通话不开免提别人听不到我说话)

  • vue添加字幕教程(vue vlog字幕怎么加)

    vue添加字幕教程(vue vlog字幕怎么加)

  • 微信怎么置顶文案(微信怎么置顶文字)

    微信怎么置顶文案(微信怎么置顶文字)

  • micro b是什么接口(micro b接线图)

    micro b是什么接口(micro b接线图)

  • 小米9se尺寸长宽高(小米9se 尺寸)

    小米9se尺寸长宽高(小米9se 尺寸)

  • 苹果手机有翻译功能吗(苹果手机有翻译英语的软件吗)

    苹果手机有翻译功能吗(苹果手机有翻译英语的软件吗)

  • 电脑管家LOL升级加速功能是什么?(电脑管家lol修复)

    电脑管家LOL升级加速功能是什么?(电脑管家lol修复)

  • 企业所得税留抵税额会显示在申报表上吗?
  • 2019城建税减半征收优惠政策解读
  • 增值税本期应补退税额为负数怎么处理
  • 餐饮企业原材料四大类
  • 政府无偿划拨土地涉及的税费
  • 公司做帐成本发票怎么开
  • 年金终值的公式
  • 供货方代垫运费计入原材料
  • 公司没有收入没开发票
  • 公司开展文体活动总结
  • 建筑公司挂靠项目账务怎么做?
  • 营改增之后就没有营业税了吗
  • 营业执照上能看出来是一般纳税人
  • 广告业增值税税率6%是多少
  • 一般纳税人所得税优惠政策
  • 资产负债率70%说明长期偿债能力
  • 公立医院规章制度
  • 公司买空调开具的进项发票可以抵扣吗?
  • 工会经费的开支必须取得发票么
  • 进口货物退税流程
  • 交到公户上的钱,还没到账可以退回吗?
  • 未开票收入纳税
  • 开了百分之五的票怎么办
  • 多缴纳的增值税怎么申请抵税
  • 如何使用U盘启动盘进行分区
  • 软件开发公司怎么做账
  • PHP:oci_pconnect()的用法_Oracle函数
  • 公司取得的营业收入
  • macOS 11 Big Sur 开发者预览版 Beta 7正式推送
  • Proxmox ve(PVE) 显示CPU和硬盘温度、UPS信息
  • sudo命令无法执行
  • 商品购进核算
  • 分配结转制造费用时借方科目
  • logd是什么进程
  • php添加扩展
  • php获取文件名后缀
  • 其他综合收益要交企业所得税吗
  • 长期股权投资后续计量收到红利账务处理
  • 史上无敌的超级兵王
  • 基于卷积神经网络的网络入侵检测算法设计与实现
  • 猿创部落是干什么的
  • php5魔术方法
  • 长期待摊费用的摊销分录
  • 工业企业总产值怎么算
  • 一般纳税人购进免税农产品如何抵扣进项税额
  • 仓库折旧会计分录
  • js逻辑表达式
  • 生产防疫物资的厂家联系方式
  • 企业影响工程成本的原因
  • 跨月管理费用多计怎么处理
  • 出售投资所得属于什么科目
  • 投资性房地产转为非投资性房地产
  • 哪些发票不能用
  • 合作研究开发项目的合同
  • 预付账款货物到了之后怎么入账
  • 根据出库商品的编码
  • 跨年度暂估成本的账务处理
  • 营改增后税率表
  • 进出口货物报关单
  • 工程物资盘盈为什么冲减在建工程
  • mysql主键冲突但数据不存在
  • mysq删除数据库
  • win7超级账户如何启用
  • win8 itunes
  • 迅速修复系统漏洞的方法
  • Linux系统复制图片
  • 2t硬盘如何分区最合理
  • shwicon.exe - shwicon是什么进程 有什么用
  • 注意 Win/WP8.1开发者账户现已迁移到全新Win10开发者中心仪表盘
  • win7系统怎么禁止更新
  • bootstrap栅格布局
  • android自学之路
  • javascript教程chm
  • 在unity中单例的主要作用
  • vue.js有什么用
  • 蓝色的css代码
  • js几种类型
  • 西安国家税务局官网首页
  • 深圳电动车怎么注册登记
  • 推进落实类似的词语
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设