微信小程序自定义组件封装及父子间组件传值
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名
官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
例如,我们封装的组件名为 **wxzx-loadmore
- wxzx-loadmore.wxml
<view hidden="{{response.length < 1}}">
<view class="weui-loadmore" hidden="{{is_loadmore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
<text class="weui-loadmore__tips">{{tip}}</text>
</view>
</view>
这里就是把index.wxml中的需要封装成组件的代码原样copy过来
- wxzx-loadmore.js
Component({
/**
* 组件的属性列表
*/
properties: {
response: {
type: String,
value: ''
},
is_loadmore: {
type: Boolean,
value: false
},
tip: {
type: String,
value: '我是有底线的'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
emit: function(data) {
// 自定义组件向父组件传值
let val = data,
my_event_detail = {
val: val
}
// myevent自定义名称事件,父组件中使用
this.triggerEvent('myevent', my_event_detail)
/*
在父组件中写上bind:myevent="get_emit",在父组件中就需要调用get_emit事件
*/
},
}
})
- index.wxml 父组件
<wxzx-loadmore
response="{{comment_list}}"
is_loadmore="{{is_loadmore}}"
bind:myevent="get_emit"
></wxzx-loadmore>
<!-- 这就是在父组件中调用子组件,然后基于子组件传值来在父组件中赋值 -->
- index.js 中
// 接受子组件的传值
get_emit: function (e) {
this.setData({
is_show: e.detail.val
})
},
- index.json 这里需要引入组件,在哪个父页面中引用子组件,就在哪个json文件中引入
{
"usingComponents": {
"wxzx-loadmore": "/component/wxzx-loadmore/wxzx-loadmore"
}
}
奋斗就是每天很难,可是一年一年却越来越容易;
不奋斗就是每天很容易,可是一年一年却越来越难。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步