程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

微信小程序的几种传值方式

发布于2023-05-20 19:35     阅读(441)     评论(0)     点赞(24)     收藏(3)


目录

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

二、本地存储传递数据

三、使用路由传递数据

四、父子组件之间传值


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

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

  1. // 步骤一:在全局app.js文件中定义数据
  2. App({
  3. globalData: {
  4. userName: '全局变量传值',
  5. }
  6. })
  7. // 步骤二:获取应用实例,不然无法调用全局变量
  8. const app = getApp()
  9. // 步骤三:调用全局变量
  10. Page({
  11. data: {
  12. },
  13. onLoad: function (options) {
  14. console.log(app.globalData.userName);
  15. },
  16. })

二、本地存储传递数据

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

  1.  设值:wx.setStorageSync('title', title)
  2.  取值:var title=wx.getStorageSync('title')

三、使用路由传递数据

传递:

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

接收:

  1. onLoad(options){
  2. console.log(options)
  3. }

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

传递:

  1. const data = JSON.stringify(this.data);
  2. wx.redirectTo({
  3. url: `跳转url?data=${data}`
  4. })

接收:

  1. onLoad(options){
  2. const data = JSON.parse(JSON.stringify(options.data));
  3. }

四、父子组件之间传值

  • 父向子传值使用的是属性绑定,子组件中 的 properties 对象 进行接收父组件传递过来的值
  • 子向父传值使用的是自定义事件,父组件通过自定义事件中的 事件对象e 来接收子组件传递过来的值

父向子传值

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

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

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

  • 父组件
  1. <child name="{{ name }}" age="{{ age }}" ></child>
  2. export default{
  3. data(){
  4. return{
  5. name:"老五",
  6. age:50
  7. }
  8. }
  9. }
  • 子组件
  1. <view>
  2. 这是父组件传递过来的值 name: {{ name }}-----age {{age}}
  3. </view>
  4. // 接受父组件传递过来的值
  5. properties: {
  6. name:{
  7. type:String,
  8. value:'我是默认值:哈哈'
  9. },
  10. age:{
  11. type:Number,
  12. value:'我是默认值: 100'
  13. }
  14. },

子向父传值

  • 子组件

WXML

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

JS

  1. data: {
  2. msg:'我是子组件的值'
  3. },
  4. methods: {
  5. send(){
  6. this.triggerEvent('send',this.data.msg)
  7. }
  8. },
  • 父组件

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

WXML

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

JS

  1. // 父组件接受子组件传递过来的值
  2. send(e){
  3. console.log(e.detail);
  4. }




所属网站分类: 技术文章 > 博客

作者:哦八戒八戒

链接:http://www.qianduanheidong.com/blog/article/528204/0c3e4fecf56336cafd18/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

24 0
收藏该文
已收藏

评论内容:(最多支持255个字符)