位置: 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下载)

  • ps的魔棒工具在哪里找(ps魔棒工具在哪个菜单里)

    ps的魔棒工具在哪里找(ps魔棒工具在哪个菜单里)

  • 飞行模式和关机有什么区别(飞行模式和关机提示音一样吗)

    飞行模式和关机有什么区别(飞行模式和关机提示音一样吗)

  • 华为nova4如何设置呼叫等待(华为nova4如何设置nfc功能)

    华为nova4如何设置呼叫等待(华为nova4如何设置nfc功能)

  • 为什么抖音点赞看不到(为什么抖音点赞点不上去,点上去了自动取消了)

    为什么抖音点赞看不到(为什么抖音点赞点不上去,点上去了自动取消了)

  • 小米手机数据漫游怎么打开(小米手机数据漫游设定)

    小米手机数据漫游怎么打开(小米手机数据漫游设定)

  • b365m主板用什么内存条(b365m主板什么水平)

    b365m主板用什么内存条(b365m主板什么水平)

  • qq电话录屏有声音么(qq电话录屏对方会显示吗)

    qq电话录屏有声音么(qq电话录屏对方会显示吗)

  • 魅族16s屏幕材质(魅族16s屏幕材质E3)

    魅族16s屏幕材质(魅族16s屏幕材质E3)

  • 微信号打标了有影响吗(微信号打标了有风险吗)

    微信号打标了有影响吗(微信号打标了有风险吗)

  • 云录制是什么(腾讯会议云录制是什么)

    云录制是什么(腾讯会议云录制是什么)

  • 小米9桌面字体改黑色(小米9桌面字体大小设置)

    小米9桌面字体改黑色(小米9桌面字体大小设置)

  • 微信电话时放歌对方会听到吗(微信电话时放歌怎么让对方也能听)

    微信电话时放歌对方会听到吗(微信电话时放歌怎么让对方也能听)

  • 三星s20+和三星s10+对比(三星s20+和三星s10+参数对比)

    三星s20+和三星s10+对比(三星s20+和三星s10+参数对比)

  • 腾讯会议电脑可以用吗(腾讯会议电脑可以签到吗)

    腾讯会议电脑可以用吗(腾讯会议电脑可以签到吗)

  • 电脑pe是什么(电脑pe是什么意思,小白一键重装系)

    电脑pe是什么(电脑pe是什么意思,小白一键重装系)

  • ts格式视频手机用什么播放器

    ts格式视频手机用什么播放器

  • p40是不是双扬声器(华为p40系列是不是双扬声器)

    p40是不是双扬声器(华为p40系列是不是双扬声器)

  • 微信一直等待中怎么办(微信老是等待中)

    微信一直等待中怎么办(微信老是等待中)

  • 快手不用了怎么注销(快手不用了怎么卸载)

    快手不用了怎么注销(快手不用了怎么卸载)

  • 已购买成功的淘宝订单怎么删除(淘宝已购买宝贝)

    已购买成功的淘宝订单怎么删除(淘宝已购买宝贝)

  • 淘宝图片怎么上传清晰(淘宝图片怎么上传)

    淘宝图片怎么上传清晰(淘宝图片怎么上传)

  • 手机内置电池更换(手机内置电池更换图解)

    手机内置电池更换(手机内置电池更换图解)

  • 美柚到底怎么用的(美柚怎么了)

    美柚到底怎么用的(美柚怎么了)

  • 安卓10系统新功能(安卓10q)

    安卓10系统新功能(安卓10q)

  • 人人视频原画怎么获得(人人视频会员原画怎么样)

    人人视频原画怎么获得(人人视频会员原画怎么样)

  • 如何把pdf转换成word(如何把pdf转换成ppt免费)

    如何把pdf转换成word(如何把pdf转换成ppt免费)

  • qq单向好友怎么设置(QQ单向好友怎么添加)

    qq单向好友怎么设置(QQ单向好友怎么添加)

  • 屏幕时间管理怎么取消(屏幕时间管理怎么关闭)

    屏幕时间管理怎么取消(屏幕时间管理怎么关闭)

  • qq怎么看是不是被删了(qq怎么看是不是单向好友)

    qq怎么看是不是被删了(qq怎么看是不是单向好友)

  • 文字转换表格(文字转换表格怎么设置行列)

    文字转换表格(文字转换表格怎么设置行列)

  • 新办营利性医疗机构是否免征土地使用税和房产税?
  • 白酒的品牌使用费含增值税吗
  • 车辆购置税和车船税的区别在哪
  • 个体经营所得税核定征收2023标准
  • 工会经费应该怎么做账
  • 金税盘系统维护注册码
  • 结转销售成本的分录
  • 应付账款转营业外收入进项税转出
  • 安装费人工费有什么不一样
  • 使用党费要向哪里倾斜
  • 小规模核定征收需要做账吗
  • 固定资产的折旧费用计入什么科目
  • 房产交易如何避免个税
  • 设备租赁公司是干嘛的
  • 应交税金及附加包括哪些
  • 财务费用做什么明细账
  • 采购办公用品计入什么科目
  • 公司是否可以开电子发票
  • 账本印花税如何申报缴纳
  • 会务费发票税率是
  • 关于工商年检社保的通知
  • 分类所得申报要申报吗
  • 注册资金怎么提出来
  • 公司与个人合伙协议
  • 两年利润都为负数,如何计算完成率
  • 间接生产费用包括
  • 华硕p8h61主板升级更换什么主板合适
  • 床垫专票可以抵扣吗
  • 股东个人财产转让流程
  • 圣克鲁斯群岛海战百度百科
  • php 设计模式 鸟哥
  • 发票红冲是什么意思需要给钱吗
  • linux动态扩容
  • 税法中一年按多少天算
  • 企业合并发生的交易费用
  • 软件研发支出计入什么科目
  • 前端使用vue
  • 独立核算的分公司责任承担问题
  • 房产原值是否含增值税
  • 事业单位用其他资金用于还单位贷款违法吗
  • 应付票据的贴现账务处理
  • 对方不给开发票做账可以直接出费用吗?
  • 税务稽查补税
  • 新版发票填开操作流程
  • 审计外聘人员支付标准
  • 现金日记账一般采用什么格式
  • 公司广告费用咨询费都应当作为管理费用对还是错
  • 珠宝可以开票抵扣吗
  • 部分货物退回怎么开票
  • 投资性房地产出售收入属于什么收入
  • 购买空调报销单怎么填
  • 土地出让金如何缴纳
  • 承兑汇票利息分录
  • 安装调试费收费标准
  • 库存商品结转成本是什么意思
  • 管理费用多了怎么办
  • 非在职人员和其他人员的区别
  • 以前年度销售退回买方账务处理
  • 没有取得增值税发票
  • 期末账面余额是什么意思
  • 新公司建账流程及日常业务处理
  • 应收账款的账户余额
  • Python MySQL进行数据库表变更和查询
  • 微软平板电脑surface pro2参数
  • windowmsgserver32是什么
  • xp系统禁用网络连接
  • ubuntu虚拟机怎么联网
  • gcf是什么软件的文件
  • dmg是啥文件
  • opengl learning
  • bat批量处理
  • bat 批处理文件
  • android之Java+html+javascript混合开发
  • ecmascript6 官方文档
  • android颜色代码表
  • android动态添加view
  • 容易混淆的词汇
  • 杭州电子税务局注册流程
  • 青岛市地方税务局网上办税厅
  • pdf扫描件怎么弄
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设