小程序-自定义组件

小程序自定义组件

 

1. 首先需要在.json中将component字段设置为true

{
"component":true
}

2. 注意组件中的属性和方法和页面中的属性和方法不一样

3. 需要在使用组件的页面中的.json配置一下字段

{
"usingComponents":{
"component-tag-name":"path/to/the/custom/component" // “组件名”：“路径”
}
}

 

4. 组件传值

父组件：

<nav-bar navbar-data="{{navbarData}}"></nav-bar>

 

子组件：

<view>{{navbarData.title}}</view>

Component({
/**
* 组件的属性列表
*/
properties: {
navbarData: {
type: Object,
value: {},
observer: function(newVal, oldVal) {
console.log(newVal)
}
}
}
},

 

5. 组件间的方法传递

子组件：

<view bindtap="onTitleTap">{{navbarData.title}}</view>

/**
* 组件中的方法
*/
methods: {
onTitleTap: function() {
this.triggerEvent('onNavTitleTap')
}
}

父组件：

<nav-bar bind:onNavTitleTap="onNavTitleTap"></nav-bar>

/***
* 点击导航栏10次
* 出现mLoc模拟定位按钮
*/
onNavTitleTap: function() {
// 默认值
let clickCount = 10
let interval = 1000
// 超过时间间隔，则点击次数清零
clearTimeout(navTitleTimer)
navTitleTimer = setTimeout(() => {
navTitleCount = 0
}, interval)
navTitleCount++
// 达到点击次数，显示mLoc
if (navTitleCount >= clickCount) {
this.isShowMockLocBtn(false)
}
}