有的时候总是需要把能复用的东西封装在组件方便调用 ,可又不经常用写篇短文记录下！
效果图
- 组件页面声明
component字段为true
{
"component": true,
}
2.js组件框架结构
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
}
})
3.json引用组件位置,如这里引用一个自定义模拟框
注意:这里定义了的是modal 下面wxml对标签也要使用modal 命名
{
"usingComponents": {
"modal": "/pages/component/modal/modal"
}
}
4.wxml 引用
<!-- <modal id='modal' name='添加分类' bind:openModal="openModal" bind:closeModal="closeModal" /> -->
<modal id='modal' name='添加分类' bind:openModal="openModal" bind:closeModal="closeModal"></modal>
- js文件调用
this.modal = this.selectComponent("#modal"); //具体根据自己业务场景放在合适的位置
/*添加商品分类*/
addGoodsclass(){
this.modal.openModal()
},
/*关闭自定义弹窗 */
closeModal(){
this.modal.closeModal()
}
6.自定义组件
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
name: { // 弹窗标题
type: String,
value: '标题'
},
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
showModalStatus: false,
animationData: {}
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
openModal () {
let currentStatu = "open";
this.util(currentStatu)
},
closeModal() {
let currentStatu = "close";
this.util(currentStatu)
},
util(currentStatu) {
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
});
this.animation = animation;
animation.opacity(0).rotateX(-100).step();
this.setData({
animationData: animation.export()
})
setTimeout(function () {
animation.opacity(1).rotateX(0).step();
this.setData({
animationData: animation
})
if (currentStatu == "close") {
this.setData(
{
showModalStatus: false
}
);
}
}.bind(this), 200)
if (currentStatu == "open") {
this.setData(
{
showModalStatus: true
}
);
}
}
}
})
至于组件的wxml和wxss写法与普通的wxml、wxcc类似！
其小程序自定义组件目的是复用,所以我们可以利用slot节点,用于承载组件使用者提供的wxml结构
这样就可以使用同一组件，而又可以拥有不同的样式结构
-
节点
为节点提供插入一个wxml结构
<modal id='modal' name='添加分类' tip="最多4个字" bind:openModal="openModal" bind:closeModal="closeModal">
<view slot="before">
<view class="drawer_content">
<input maxlength="4" ></input>
</view>
</view>
</modal>
8.组件wxml slot节点承载插入的wxml结构
<!--mask-->
<view class="drawer_screen" wx:if="{{showModalStatus}}"></view>
<!--content-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
<view class="t_box">
<view class="drawer_title">{{name}}</view>
<view class="tip">(提示:{{tip}})</view>
</view>
<slot name="before"></slot>
<view class="b_box">
<view class="btn_qx" catchtap="closeModal" >取消</view>
<view class="btn_ok" catchtap="closeModal" >确定</view>
</view>
</view>
最后效果
页面给组件传递数据，这个也很重要必须记录下
1.页面传递参数给组件, data-other="{{xxx}"类似平常的自定义的参数
<modal id='modal' name='添加分类' tip="分类名称最多4个字" data-other="{{goods.newclass}}" ></modal>
组件页面获取data-other="{{xxx}}" 参数. 添加如下方法即可获取
attached: function () {
//通过dataset获取data-other的值
console.log(this.dataset.other);
}
2 组件如何给调用页传递参数？在调用页绑定一个自定义方法bindevent="goodsEvent" ，组件里用
this.triggerEvent('event')回传数据到绑定方法上。
调用页
<modal id='modal' name='添加分类' tip="分类名称最多4个字" bindevent="goodsEvent" ></modal>
组件,此次event就是自定义的方法名
//组件
butok(){
this.triggerEvent('event')//通知父级页面用户已点确定(与父级页通信)
}
最后调用页面的js里写上goodsEvent 方法即可获取到组件传递过来的数据
goodsEvent(){
console.log('已接受到')
}
总结下this.triggerEvent('event') 第一个参数 回调绑定方法名称, 第二个应该是你想要回传的数据，因为这里我只是为了监听用户是否点了确定，所以没尝试如有需要请尝试！有需要交流请下方留言！
页面调用组件里的方法
test(){
this.edit = this.selectComponent("#edit");//获取自定义子组件
this.edit.returnData();
}
下面只需要在组件methods里定义方法returnData
returnData() {
console.log('hello world! I am learning 微信小程序')
},
页面调用组件里的变量及设置
//组件里的一个变量
data: {
param:'你好'
},
//页面
this.model= this.selectComponent("#model");//获取自定义子组件
console.log(this.model.data.param)
this.model.setData({
param: 'test'
})
