Several Value Transfer Methods of WeChat Mini Programs

Table of contents

1. Use global variables to pass data

2. Local storage and transmission of data

3. Use routing to transfer data

4. Passing values ​​between parent and child components

---

1. Use global variables to pass data

Tip: Use globalData in app.js to store data as global variables , and get it through getApp().globalData on the page that needs to be used

// 步骤一：在全局app.js文件中定义数据
App({
  globalData: {
    userName: '全局变量传值',
  }
})

// 步骤二：获取应用实例，不然无法调用全局变量
const app = getApp()

// 步骤三：调用全局变量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

2. Local storage and transmission of data

Tip : Use the local storage wx.setStorageSync  and wx.getStorageSync  provided by the WeChat applet to transfer values.

　设值：wx.setStorageSync('title', title)
　取值：var title=wx.getStorageSync('title')

3. Use routing to transfer data

transfer:

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

take over:

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

Note: If the object type data is passed, you will find it is "[object, object]" when you go to another page to get it. The solution is to use JSON.stringify() and JSON.parse()

transfer:

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

take over:

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

4. Passing values ​​between parent and child components

• Passing values ​​from parent to child uses  the object 属性绑定in the child component  to receive the value passed by the parent componentproperties
• When the child passes the value to the parent , the parent component receives the value passed by the child component 自定义事件through the custom event 事件对象e 

Pass value from parent to child

• Create a  folder to hold subcomponents. Create our sub-component under the folder ,   it can be created with any name, it is created here   . componentscomponents  childchild

•  After it is created, it is introduced, and 子组件 child imported into 父组件 index it. Let me explain here that in this case, two pages are created, one is the routing page  under the node , and the other is   the component  under the node  .      pages index components child

//在父组件的 json 文件中的 usingComponents节点下 引入
{
  "usingComponents": {
    "child":"../../components/child/child"
  }
}

• Render the content of the child component to the parent component

The custom name given to the component is  to write a set of  tags child in it when we render index 父组件 <child><child> 

• parent component

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


export default{
    data(){
        return{
            name:"老五",
            age:50
        }
    }
}

• Subassembly

<view>
  这是父组件传递过来的值 name: {
   
   { name }}-----age {
   
   {age}}
</view>
  

// 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:'我是默认值：哈哈'
    },
    age:{
      type:Number,
      value:'我是默认值： 100'
    }
  },

Pass value from child to parent

• Subassembly

WXML

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

JS

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

• parent component

Define this custom event in the parent componentbindsend="send"

WXML

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

JS

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