类似于vue中的组件传值,可以应用于很多场景,用的最多的则是路由跳转传值和获取上一页面的数据
一. 页面跳转传参:直接在url后拼接
wx.navigateTo({
//可以使用反引号,用${}的形式,里面可以写入js表达式
url: `/pages/index/index?id=${id}`,
})
接收
onLoad: function (options) {
//接收参数
console.log(options.id); //打印上一页面传递的id值
},
二、eventChannel:和被打开页面进行通信
jumpChannel() {
let that = this
console.log('jumpChannel','111111111111111111111');
wx.navigateTo({
url: '../eventB/eventB',
events:{
someEvent:function(data) { //从其他页面返回的参数
console.log('jumpChannel',data)
that.setData({
channelTxt:data.data
})
}
},
success:function(res) { //向下一个页面传参
res.eventChannel.emit('channelA',{data: 'content from first page'})
}
})
},
第二个页面eventB.js
从第一个页面过来时,onLoad里接收参数key=channelA,点击页面按钮,返回上级页面时,传参key=someEvent
tap() {
event.pub('home','this is new content')
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('someEvent',{data:'back from second page '})
wx.navigateBack({
delta: -1,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
const eventChannel = this.getOpenerEventChannel()
// eventChannel.emit('someEvent',{data:'back from second page '})
eventChannel.on('channelA',function(data) {
console.log('eventB',data)
that.setData({
content:data.data
})
})
},
三、使用全局变量传值
app.js中定义一个全局的空属性,到当前页面获取全局属性,并且赋需要传递的值给这个全局属性,再到跳转之后的页面获取这个全局属性,用其进行相应的操作,之后再赋值为空
App({
globalData:{
data:'',
}
})
const app = getApp()
Page({
onLoad: function (options) {
//将全局变量进行赋值
app.globalData.data = '二级页面'
console.log(app.globalData.value); //打印 二级页面
}
})
触发回调后,任意页面都可以使用,使用完之后赋值为空即可
四、利用缓存传值:
wx.setStorageSync('goods', '新页面')
let value = wx.getStorageSync('goods')
console.log(value); //打印 新页面
五、父子组件的通讯方式:
1、属性绑定:
属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件
<tabDemo activeIdx="{{0}}"></tabDemo>
Component({
properties: {
activeIdx: {
type: Number,
value: 0
}
},
}
2、事件绑定:
事件绑定用于实现子向父传值,可以传递任何类型的数据
使用步骤:
(1)在父组件的.js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
//和data平齐
syscCount(){
},
(2)在父组件的.wxml中,通过自定义事件的形式,将步骤一定义的函数引用传递给子组件
<mydemo4 count="{{count}}" bind:sysc="syscCount"></mydemo4>
(3)在子组件的.js中,通过调用this.triggerEvent('自定义事件名称',{/参数对象/}),将数据发送到父组件
methods: {
addCount(){
this.setData({
count:this.properties.count + 1
})
// 触发自定义事件,将数值同步给父组件
this.triggerEvent('sysc',{value:this.properties.count})
}
}
(4)在父组件的.js中,通过e.detail获取到子组件传递过来的数据
//和data平齐
syscCount(e){
console.log('sysCount!!!');
// console.log(e.detail.value);
this.setData({
count:e.detail.value
})
},
- 获取组件实例:
可在父组件里调用 this.selectComponent( id 或 class选择器),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器。
//.wxml
<mydemo4 count="{{count}}" bind:sysc="syscCount" class="child" id="childId"></mydemo4>
<view>-------</view>
<view>父组件中,count的值是:{{count}}</view>
<button bindtap="getChild">获取子组件的实例对象</button>
//.js
getChild(){ //按钮的 tap 处理函数
// 切记下面参数不能传递标签选择器,只能的id或者class,否则会返回 null
const child = this.selectComponent('.child')
// console.log(child);
// child.setData({
// count:child.properties.count + 1
// })
child.addCount()
}
4、behaviors
behaviors是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。
每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,每个组件可以引用多个behaviors,behavior也可以引用其它behavior。
(1)创建behaviors
//调用 Behavior() 方法,创建实例对象并使用 module.exports 把 behavior 实例对象共享出去
module.exports = Behavior({
// 属性节点
properties:{},
// 私有数据节点
data:{
username:'zs'
},
// 事件处理函数和自定义方法
methods:{},
// 其他节点。。。
})
(2)导入并使用 behavior
在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据和方法。
// 使用 require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behaviors/my-behaviors')
Component({
// 将导入的 behavior 实例对象挂载到 behavior 数组节点中,即可生效
behaviors:[myBehavior],
})
3)behavior中所有可用的节点
可用的节点 类型 可选项是否必须 描述
properties Object Map 否 同组件的属性
data Object 否 同组件的数据
methods Object 否 同自定义组件的方法
behaviors String Array 否 引入其它的 behavior
created Function 否 生命周期函数
attached Function 否 生命周期函数
ready Function 否 生命周期函数
moved Function 否 生命周期函数
detached Function 否 生命周期函数
(4)同名字段的覆盖和组合规则
组件和它引用的 behavior 中可以包含同名字段,对这些处理的字段有如下三种同名处理规则:
同名的数据字段(data):
若同名的数据字段都是对象类型,会进行对象合并;
其余情况会进行数据覆盖,覆盖规则为: 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高);
同名的属性(properties)或方法(methods):
若组件本身有这个属性或方法,则组件的属性或方法会覆盖 behavior 中的同名属性或方法;
若组件本身无这个属性或方法,则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法;
同名的生命周期函数:
对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;
对于同种生命周期函数和同字段 observers ,遵循如下规则:
behavior 优先于组件执行;
被引用的 behavior 优先于 引用者 behavior 执行;
靠前的 behavior 优先于 靠后的 behavior 执行;
如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。