位置: IT常识 - 正文

微信小程序的几种传值方式(微信小程序几几年上线的)

编辑:rootadmin
微信小程序的几种传值方式

目录

一、使用全局变量传递数据

二、本地存储传递数据

三、使用路由传递数据

四、父子组件之间传值

一、使用全局变量传递数据

推荐整理分享微信小程序的几种传值方式(微信小程序几几年上线的),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序几个人手指按住屏幕随机选人,微信小程序的几种类型,微信小程序几个人手指按住屏幕随机选人,微信小程序的几种跳转方式,微信小程序的几种跳转方式,微信小程序的几个层,微信小程序的几款音频提取都提提取失败怎么,微信小程序的几种跳转方式,内容如对您有帮助,希望把文章链接给更多的朋友!

提示:利用 app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过 getApp().globalData 获取

// 步骤一:在全局app.js文件中定义数据App({ globalData: { userName: '全局变量传值', }})// 步骤二:获取应用实例,不然无法调用全局变量const app = getApp()// 步骤三:调用全局变量Page({ data: { }, onLoad: function (options) { console.log(app.globalData.userName); },})二、本地存储传递数据

提示:利用微信小程序提供的本地存储 wx.setStorageSync 与 wx.getStorageSync 进行传值。

 设值:wx.setStorageSync('title', title) 取值:var title=wx.getStorageSync('title')三、使用路由传递数据

传递:

// 跳转的同时携带数据拼接在URL后面,跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数wx.navigateTo({ url: `跳转路由?data=${data}`,})

接收:

onLoad(options){ console.log(options)}

注意:如若因为传递的是对象类型的数据,到另一个页面获取时会发现是"[object,object]",解决方法是利用JSON.stringify()和JSON.parse()

传递:

const data = JSON.stringify(this.data);wx.redirectTo({ url: `跳转url?data=${data}`})微信小程序的几种传值方式(微信小程序几几年上线的)

接收:

onLoad(options){ const data = JSON.parse(JSON.stringify(options.data));}四、父子组件之间传值父向子传值使用的是属性绑定,子组件中 的 properties 对象 进行接收父组件传递过来的值子向父传值使用的是自定义事件,父组件通过自定义事件中的 事件对象e 来接收子组件传递过来的值

父向子传值

创建一个 components 文件夹 用于存放子组件。在 components 文件夹下创建我们的子组件 child , 创建成任何名字都可以,这里创建成 child 。

 创建好以后就是引入,把子组件 child 引入到父组件 index 中去。 这里说明一下,此案例创建了两个页面,一个是 pages 节点下的 index 路由页面,一个是 components 节点下的 child 组件  。     //在父组件的 json 文件中的 usingComponents节点下 引入{ "usingComponents": { "child":"../../components/child/child" }}渲染子组件内容到父组件上

给组件起的自定义名字是 child 那么 我们渲染的时候就 在 index 父组件 里写上一组 <child><child> 标签即可

父组件<child name="{{ name }}" age="{{ age }}" ></child>export default{ data(){ return{ name:"老五", age:50 } }}子组件<view> 这是父组件传递过来的值 name: {{ name }}-----age {{age}}</view>// 接受父组件传递过来的值 properties: { name:{ type:String, value:'我是默认值:哈哈' }, age:{ type:Number, value:'我是默认值: 100' } },

子向父传值

子组件

WXML

<!-- 点击按钮向父组件传值 --><button bindtap="send">点击按钮向父组件传值</button>

JS

​​ data: { msg:'我是子组件的值' }, methods: { send(){ this.triggerEvent('send',this.data.msg) } },父组件

父组件中定义一下这个自定义事件bindsend="send"

WXML

<child name="{{ name }}" age="{{ age }}" bindsend="send"></child>

JS

// 父组件接受子组件传递过来的值 send(e){ console.log(e.detail); }
本文链接地址:https://www.jiuchutong.com/zhishi/297731.html 转载请保留说明!

上一篇:2023前端面试题汇总(2023前端面试题目100及最佳答案)

下一篇:元素垂直居中的五种方式(元素垂直水平居中方式)

  • 公司没有业务了 可以办理停业
  • 发票没有写纳税人识别号可以吗
  • 作废的增值税专用发票怎么处理
  • 账簿保管期满如何销毁
  • 非居民税收征管方式包括
  • 营改增之前
  • 取得虚开增值税专票如何税务处理
  • 电子承兑汇票是到期日前10天提示承兑吗
  • 税务部门如何核定税额
  • 异地预缴企业所得税几个点
  • 开个人普发票需要什么资料?
  • 企业出租房屋交什么税?
  • 分公司注销所得税
  • 不缴地税国税可停票吗?
  • 2017年7月后手撕发票还能报销吗?
  • 收取手续费的委托代销 发票谁来开
  • 公积金贷款利息现在是多少
  • 企业筹建期间开办费计入什么科目计入借方还是贷方
  • 借钱注册公司会计分录
  • 本月合计怎么做
  • 多转出的进项税怎么做账
  • 公司注册资金抽逃
  • win11如何关闭开机自启动项
  • php有很多流行的mvc框架,这些框架可以
  • 第三方检测公司招聘信息
  • 使用mac什么意思
  • PHP:Memcached::isPersistent()的用法_Memcached类
  • PHP:class_uses()的用法_spl函数
  • 消费税的会计分录怎么写
  • 视同销售的会计处理怎么做?
  • 小企业会计科目表
  • 电维护费多少合法
  • 长期待摊费用的会计分录
  • bootstrap easyui结合
  • 蓝桥杯真题c语言
  • js怎样遍历对象中的每个元素
  • MVC架构模式
  • 帝国cms自定义列表
  • 分类信息有哪些网站
  • dedecms进入数据库
  • 政府无偿划转股权印花税
  • 在发票上盖了公章有用吗
  • 场地租赁需要注意什么
  • 汇算清缴补交的所得税怎么记帐
  • 物资采购是
  • 弃置费用的摊余成本
  • 电子增值税发票样本
  • 房租费会计分录
  • 如果找国外客户
  • 以物易物有什么好处
  • 关于新修订的未保法
  • 开票和不开票
  • 开票软件服务费计入什么会计科目
  • 平行结转分步法例题
  • sql查询使用临时表
  • xbox预览系统
  • ubuntu安装ubuntu-desktop
  • linux使用pip
  • win7总是弹出windows激活
  • linux AS3 oracle9i 安装指南
  • 怎么自己安装windows7
  • 进不去操作系统 怎么样修复引导
  • linux怎么下载安装腾讯Tim?
  • linux常用网络工具
  • style=display:inline
  • 用git打更新包的代码
  • 动态加载dll错误
  • 批处理常用命令及用法大全
  • angular jsx
  • shell脚本获取文件指定内容
  • unity learning
  • 在jquery中fadein
  • js 模块 modules
  • js运行效率
  • python的web框架
  • python的对象
  • 税务局收垃圾处置费
  • 学历认证取消申请还能再申请吗
  • 电子税务局如何查询财务报表
  • 北京国税查询发票真伪查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设