类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。需要配置 .json 开启自定义组件
{
"component": true
}
<detail-form></detail-form>
Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等。
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据,可用于模板渲染
lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
在页面的.json 下注册即可
在app.json 中注册
它可以在 Component 中 的 externalClasses 属性来配置 样式作用域。
样式作用域分类;
Component({
options:{
multipleSlots:true,
styleIsolation:"apply-shared" //开启自定义样式 作用域范围
},
externalClasses:["cell-class"], //可以定义多个,
})
<view class="cell-class main-container">
测试自定义组件
</view>
key 必须和 组件中 定义的类型名保持一致, 然后传入自定义类名 value,就可以影响到组件的样式了
<!-- 页面 -->
<detail-form cell-class="body-container"></detail-form>
注意:
它跟Vue / React 一样有插槽的功能,但是小程序 插槽比较拉胯,没有插槽作用域,插槽不可以传递值 。
默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,需要在 js 中 声明
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
<!-- wxml -->
<slot></slot> <!-- 默认插槽 -->
<slot name="button"></slot> <!-- 具名插槽 -->
<slot name="personInfo"></slot>
<detail-form cell-class="body-container" model:content="{{str}}" >
<view>
默认插槽
</view>
<view slot="button">
<button>测试插槽</button>
</view>
<view slot="personInfo">
<button>个人信息插槽</button>
</view>
</detail-form>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。