全局变量传递数据

app.js中globalData定义数据  在需要页面中调用getApp（）

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

本地存储

wx.setStorageSync('title',title)
const title = wx.getStorageSync('title)

路由传参

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

跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数

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'
    }
  },

子向父传值

• 子组件

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

• 使用this.triggerEvent 传值

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

• 父组件

父组件中定义一下这个自定义事件bindsend="send"  e.detail获取参数

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

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