4.微信小程序之自定义组件
来理一理自定义组件的思路
距离下班还有一小时
╮(╯▽╰)╭
1.组件简单使用
组件
注意:com.json中
{
"component": true, //自定义组件声明
"usingComponents": {} //可选项,用于引入其他组件
}
com.wxml
<view class="container">
<view class='red' bindtap='onRed'></view>
<view class='gray'></view>
</view>
com.wxss
.container{
height: 400rpx;
width: 400rpx;
border: 1rpx solid #000;
color: #fff;
}
.red{
width: 400rpx;
height: 200rpx;
background: red;
}
.gray{
width: 400rpx;
height: 200rpx;
background: gray;
}
组件写好了,接下来引用。
要使用组件的页面
打开要引入组件的页面,test.json
{
"usingComponents": {
"apple":"/pages/com/com"
}
}
test.wxml
<apple></apple>
引入成功。什么?组件写得太简单了,不要在意这种细节。。。
2.给组件绑定事件
com.wxml
<view class='red' bindtap='onRed'></view
com.js
methods: {
onRed() {
console.log('打印啦啦啦,红色');
}
}
当点击红色块时,可以看见控制台打印输出。
3.页面向组件传值
test.wml
<apple now-in="index" bind:getRed="onGet"></apple>
组件com.js
properties: {
nowIn:String
},
com.wxml
<view class="container">
<view class='red'></view>
<view class='gray'></view>
</view>
<view>{{nowIn}} is here</view>
结果
这里我们要注意,在页面定义自定义属性时是 “now-in”,在组件js中接收是 “nowIn”,驼峰的写法。
可以使用this.data,可看见传过来的数据。
4.组件向页面传值
com.js
methods: {
onRed() {
console.log('打印啦啦啦,红色');
this.triggerEvent("getRed", this.data.nowIn);
console.log(this.data);
}
}
test.wxml
<apple now-in="index" bind:getRed="onGet"></apple>
texst.js
onGet(e){
console.log(e);
this.setData({
hhh:e.detail
})
}
在detail中,就可以看见我们想要传的值,nowIn=“index”, 完成传值。
啦啦啦距离下班还有27分钟,嘿嘿嘿~