自定义组件
创建自定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。需要配置 .json 开启自定义组件
代码语言：txt复制{
"component": true
}- 通过在 components 下创建 组件
- 然后在页面中使用时，通过配置，页面.json 的 usingComponents 来注册组件，注册是以 key-value 方式。 key 为组件名， value 为组件路径
- 最后直接在页面中使用即可
<detail-form></detail-form>Component 构造器
Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。
代码语言：txt复制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 属性来配置 样式作用域。
样式作用域分类;
- （1）当值为isolated，则为开启样式隔离
- （2）若为apply-shared，父影响子，即页面的样式可以影响到组件，但是组件不能影响组件外的样式。
- （3）若为shared父子影响，为双向影响
使用自定义组件样式流程
- 通过在 子组件中 Component 中 定义 externalClasses 样式作用域范围，以及自定义样式的 class 类名
Component({
options:{
multipleSlots:true,
styleIsolation:"apply-shared" //开启自定义样式 作用域范围
},
externalClasses:["cell-class"], //可以定义多个，
})- 然后在子组件页面中使用 定义的class 类名
<view class="cell-class main-container">
测试自定义组件
</view>- 在页面中使用组件，传入自定义的class 就可以影响到组件的样式了
key 必须和 组件中 定义的类型名保持一致， 然后传入自定义类名 value，就可以影响到组件的样式了
代码语言：txt复制<!-- 页面 -->
<detail-form cell-class="body-container"></detail-form>注意：
- 不要使用 id 选择器
自定义组件 - 插槽
它跟Vue / React 一样有插槽的功能，但是小程序 插槽比较拉胯，没有插槽作用域，插槽不可以传递值 。
默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，需要在 js 中 声明
代码语言：txt复制Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})定义插槽
代码语言：txt复制<!-- wxml -->
<slot></slot> <!-- 默认插槽 -->
<slot name="button"></slot> <!-- 具名插槽 -->
<slot name="personInfo"></slot>使用插槽
代码语言：txt复制<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>
