在components目录下创建了一个count文件夹,然后在新建Component,组件名称命名为count,微信开发者工具会自动的创建count组件。
一:定义组件
在miniprogram下的目录下创建一个components文件夹,与pages目录同级,这个文件夹专门是用来放自定义组件的 例如:在components目录下创建了一个count文件夹,然后在新建Component,组件名称命名为count,微信开发者工具会自动的创建count组件
// =============count.wxml================== <view> <view class="count-container"> <view bindtap="reduce" class="{{count == 1? 'btn-disabled': ''}}}">-</view> <input bindinput="handleInput" type="number" value="{{count}}" /> <view bindtap="add">+</view> </view> </view> // =============count.js================ // components/count/count.js Component({ /** * 组件的属性列表 */ properties: { count: Number, }, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: { reduce() { var count = this.data.count - 1; if (count < 1) { count = 1; } this.setData({ count, }); this.triggerEvent('changeCount', count); console.log(this.data.count); }, add() { var count = this.data.count + 1; this.setData({ count, }); this.triggerEvent('changeCount', count); console.log(this.data.count); }, handleInput(event) { this.setData({ count: event.detail.value, }); this.triggerEvent('changeCount', event.detail.value); // 向外暴露函数 }, }, });
二:使用组件
在pages目录下,这里我创建了一个customComponents页面
在要使用页面对应的customComponents.json中的usingComponents自定义组件的名称,同时引入组件的路径
// customComponents.json { "usingComponents": { "count":"/components/count/count" } }
// customComponents.wxml <count count="{{countNum}}" bind:changeCount="handleCount"></count> <view class="parentText">父组件count:{{countNum}}</view>
****// pages/customComponents/customComponents.js Page({ /** * 页面的初始数据 */ data: { countNum: 1, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // 父组件中自定义绑定的事件 handleCount(event) { this.setData({ countNum: event.detail, // 获取子组件传递过来的值 }); }, });
三:小程序中组件的通信与事件
父传子
注释: properties类似于vue中的props,react中的this.props
wxml数据绑定:用于父组件向子组件指定属性设置数据,在子组件中properties对象接收外部(父)组件传过来的自定义属性数据,可以是对象,数组,基本数据类型等。
子传父
注意: triggerEvent,就相当于vue中的this.$emit('绑定在父组件自定义事件名称',携带的数据)方法的,而在React中是通过this.props.方法接收,调用父组件的方法。
事件: 用于子组件通过 this.triggerEvent()向父组件传递数据,可以传递任意数据,父组件通过绑定绑定监听事件,从而触发父组件自定义事件,event.detail是子组件传递过来的值。
在父组件中还可以通过this.selectComponent("类名或ID")方法获取子组件的实例对象,这样在父组件中不必通过event.detail的方式获取,可以直接访问子组件任意的数据和方法。
前提条件:
需要在父组件的引用自定义组件上,添加class或id
<count class="count" count="{{countNum}}" bind:changeCount="handleCount" ></count>
那么,在父组件中的handleCount中里调用 this.selectComponent,获取子组件的实例数据
调用时需要传入一个匹配选择器 class与Id都可以,如,this.selectComponent('类或ID')
handleCount(){ var count = this.selectComponent('.count'); // 获取子组件的实例 this.setData({ countNum: count.data.count // 重新赋值setData countNum数据 }) }
相关推荐
0评论