小程序组件通过behavior实现代码重用

behavior代码共享（数据不会相互影响）

be.js文件

let beh = Behavior({

// 共享属性

properties: {

name: {

type: String,

value: ‘malinshu’

},

sex: {

type: String,

value: ‘man’

}

},

// 共享数据

data: {

},

// 共享方法

methods: {

behTap(name, sex) {

this.setData({

name: name,

sex: sex

})

}

}

})

export {

beh

}

comp1组件1

js代码：

import { beh } from ‘./be.js’ // 导入behavior.js

Component({

behaviors: [beh], // 继承behavior.js里面的properties，data，methods

properties: {

name:{

type:String,

value: ‘xiaoxiao’,

observer:(newv,oldv,path)=>{

console.log(newv,oldv,path)

// 输出malinshu xiaoxiao[“name”]

}

}

},

methods: {

onTap(ev) {

let { name, sex } = ev.target.dataset

this.behTap(‘malinshu’, ‘man also’) // 通过this可以访问behavior.js里面的内容

}

}

})

wxml代码：

comp1:name:{名称:{{ name }},性别{{ sex }}}

设置数据

comp2组件2

js代码：

import { beh } from ‘./be.js’ // 导入behavior.js

Component({

behaviors: [beh], // 继承behavior.js里面的properties，data，methods

properties: {

},

methods: {

onTap(ev) {

let { name, sex } = ev.target.dataset

this.behTap(‘mamama’, ‘shushushu’) // 通过this可以访问behavior.js里面的内容

}

}

})

wxml代码：

comp2:name:{名称:{{ name }},类型：{{ sex }}}

设置数据

在页面中应用这两个组件