类似于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 不会重复执行。
网友评论