小程序自定义组件
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) } }