目录
一、使用全局变量传递数据
二、本地存储传递数据
三、使用路由传递数据
四、父子组件之间传值
一、使用全局变量传递数据
提示：利用 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文章来源：https://www.toymoban.com/news/detail-406052.html
<!-- 点击按钮向父组件传值 -->
<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文章来源地址https://www.toymoban.com/news/detail-406052.html
// 父组件接受子组件传递过来的值
send(e){
console.log(e.detail);
}
到了这里，关于微信小程序的几种传值方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
