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

  • ai文件是什么(AI文件是什么文件)

    ai文件是什么(AI文件是什么文件)

  • 华为可以设置悬浮快门键吗(华为设置悬浮窗)

    华为可以设置悬浮快门键吗(华为设置悬浮窗)

  • vivos6手机的电池是多少毫安(vivos6手机的电池多大)

    vivos6手机的电池是多少毫安(vivos6手机的电池多大)

  • 微信运行环境加载失败是怎么回事(微信运行环境加载失败2101)

    微信运行环境加载失败是怎么回事(微信运行环境加载失败2101)

  • 发作品的最佳时间(发作品几点发合适)

    发作品的最佳时间(发作品几点发合适)

  • 闲鱼鱼塘怎么突破500人(闲鱼渔塘)

    闲鱼鱼塘怎么突破500人(闲鱼渔塘)

  • 机械硬盘需要散热吗(机械硬盘需要防尘吗)

    机械硬盘需要散热吗(机械硬盘需要防尘吗)

  • usb-c转闪电啥意思(usb—c转闪电)

    usb-c转闪电啥意思(usb—c转闪电)

  • 笔记本可以一边充电一边使用吗(笔记本可以一边连wifi一边开热点吗)

    笔记本可以一边充电一边使用吗(笔记本可以一边连wifi一边开热点吗)

  • win7系统漏洞需要修复吗(win72020年漏洞有必要修复吗)

    win7系统漏洞需要修复吗(win72020年漏洞有必要修复吗)

  • 苹果个人热点消失原因(苹果个人热点消失了怎么找)

    苹果个人热点消失原因(苹果个人热点消失了怎么找)

  • iphone手机怎么设置白名单(iphone手机怎么设置振动模式)

    iphone手机怎么设置白名单(iphone手机怎么设置振动模式)

  • mac电池循环次数(mac电池循环次数26次是使用了多久)

    mac电池循环次数(mac电池循环次数26次是使用了多久)

  • 苹果手机一冷就自动关机怎么回事(苹果手机一冷就黑屏怎么回事)

    苹果手机一冷就自动关机怎么回事(苹果手机一冷就黑屏怎么回事)

  • 笔记本风扇加油孔在哪(笔记本风扇加油位置)

    笔记本风扇加油孔在哪(笔记本风扇加油位置)

  • 听筒没声音扬声器有(听筒没声音扬声器有声音耳机有声音)

    听筒没声音扬声器有(听筒没声音扬声器有声音耳机有声音)

  • 微信无法获取附近人是怎么回事(微信无法获取附近的人)

    微信无法获取附近人是怎么回事(微信无法获取附近的人)

  • 手机桌面歌词怎么解锁(手机桌面歌词怎么移动)

    手机桌面歌词怎么解锁(手机桌面歌词怎么移动)

  • 我酸了是什么意思(我酸了如何幽默回复)

    我酸了是什么意思(我酸了如何幽默回复)

  • 微信怎么把对方静音(微信怎么把对方的聊天记录给自己)

    微信怎么把对方静音(微信怎么把对方的聊天记录给自己)

  • 苹果11有锁怎么激活(苹果11有锁怎么解锁)

    苹果11有锁怎么激活(苹果11有锁怎么解锁)

  • 安卓怎么查看充电次数(安卓怎么查看充值记录)

    安卓怎么查看充电次数(安卓怎么查看充值记录)

  • 充电宝忘记还了怎么办(充电宝忘记还了怎么暂停)

    充电宝忘记还了怎么办(充电宝忘记还了怎么暂停)

  • lte和4g哪个快(LTE和4G哪个快)

    lte和4g哪个快(LTE和4G哪个快)

  • 华为不支持网易云音乐吗(华为不支持网易大神登录)

    华为不支持网易云音乐吗(华为不支持网易大神登录)

  • qq音乐怎么剪音乐(qq音乐中怎么剪辑音乐)

    qq音乐怎么剪音乐(qq音乐中怎么剪辑音乐)

  • 华为颜色反转在哪(华为的颜色反转在哪里)

    华为颜色反转在哪(华为的颜色反转在哪里)

  • 【中秋快乐】如何用three.js实现我的太空遐想3D网页(中秋快乐的祝福语怎么说)

    【中秋快乐】如何用three.js实现我的太空遐想3D网页(中秋快乐的祝福语怎么说)

  • 我的VUE 学习之路(下)(vuexy)

    我的VUE 学习之路(下)(vuexy)

  • 北京增值税发票网上申领流程
  • 政府预算会计怎样调整跨年度结转
  • 公司给员工租的宿舍怎么交税
  • 社保基数是按税前工资还是税后工资
  • 股东股权比例怎么分配
  • 企业所得税计算方法举例说明
  • 个人资金借给企业
  • 商品房预售期一般多久
  • 股权变更怎么缴税
  • 收到公益性捐赠所得税
  • 小规模纳税人零申报是每季度报吗
  • 燃气公司开发票的工程款入什么会计科目核算与分录怎么写?
  • 已核销的贷款收回计入什么科目
  • 营改增以前建筑税率
  • 公司无偿使用个人车辆,个人需要缴纳税款吗
  • 农产品增值税免税政策
  • 子公司具有独立的法律地位吗
  • 积分小技巧
  • 三个点的专票要交多少税
  • 销售折让发票如何处理?
  • 外贸出口退税会计和会计区别
  • 企业在项目建设前必须进行
  • applepay怎么用云闪付
  • linux系统中怎么编辑文件
  • win10重置此电脑的密码是什么
  • 收到安监处罚款怎么处理
  • 品牌转让怎么写
  • 跨年销货退回账务处理
  • 税收保全有哪些
  • win10右键个性化显示该文件
  • 一般纳税人辅导期什么意思
  • 出纳岗位的职责是什么
  • pytorch model.module
  • 圣克鲁斯岛战役
  • pc端微信扫码支付
  • php json格式
  • uni-simple-router 跳转无效
  • 给境外公司代扣代缴税款
  • Monaco-editor的JSONSchema配置及使用介绍
  • 收伙食费入什么科目
  • 小企业销售收入分录
  • 企业出租专利技术收取的租金不得确认为收入对吗
  • 产权出典是啥意思
  • 所得税费用需要结转损益吗
  • 资产负债表里的固定资产是原值还是净值
  • 固定资产错记到费用了怎么办
  • 公司对员工的罚款用途
  • 以前年度的销售退回能否直接冲减销售收入
  • 外币交易的账户设置
  • 销售货物时发票多开了金额如何处理?
  • 代账公司帮客户开发票
  • 公司团体体检一般什么价位
  • 库存商品发出计价测试
  • 公司股东的主要几种分类
  • 技术咨询服务开票代码
  • 暂估入账的材料对材料成本差异率
  • 什么企业可以开培训费发票
  • 虚拟机vmware下载教程
  • windows7个性化菜单
  • win10周年更新版是什么意思
  • xp系统注册表在哪
  • linux CentOS/redhat 6.5 LVM分区使用详解
  • win10系统下怎么安装caxa2016电子图板 caxa2016电子图板安装详细图文教程
  • win10一年更新几次
  • wind移动版
  • linux系统修改
  • 在github开源的项目有假的吗
  • linuxshell命令行
  • linux怎么使用c语言
  • Android: netd中DnsProxyListener的简单介绍
  • linux定时备份文件
  • 基于JAVASCRIPT实现的可视化工具是
  • shell终端是什么意思
  • js dom操作方法
  • python并发和并行
  • python中的字符串的英文
  • 发票为什么要验旧操作
  • 个体工商户怎样交税
  • 个人所得税减免申报操作流程
  • 印花税核定依据填写什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设