1. 自定义组件
类似Vue或react中的自定义组件
小程序允许我们使用自定义组件的方式来构建页面
1.1 创建自定义组件
类似于页面, 一个自定义组件由
json
wxml
wxss
js
4个文件组成
可以在微信开发者工具中快速创建组件的文档结构
在文件夹内 components/myHeader
, 创建组件 名为myHeader
1.1.1 声明组件
- 首先需要在组件的
json
文件中进行自定义组件声明myHeader.json
{
"component": true,
}
1.1.2 编辑组件
- 同时, 还要再组件的
wxml
文件中编写组件模板, 在wxss
文件中加入组件样式,slot
表示插槽, 类似Vue中的slotmyHeader.wxml
<!--components/myHeader/myHeader.wxml-->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
- 在组件的
wxss
文件中编写样式
注意: 在组件中wxss不应该使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss
/* components/myHeader/myHeader.wxss */
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
1.3 注册组件
- 在组件的
js
文件中, 需要使用Component()
来注册组件, 并提供组件的属性定义、内部数据和自定义方法
myHeader.js
// components/myHeader/myHeader.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 这里定义了innerText属性, 属性值可以在组件使用时指定
innerText:{
// 期望要的数据都是 string类型
type: String,
// 默认值
value: "default value",
}
},
/**
* 组件的初始数据
*/
data: {
// 这里是一些组件内部的数据
someData:{}
},
/**
* 组件的方法列表
*/
methods: {
// 这里是一个组件内的自定义方法
selfMethod(){}
}
})
1.2. 声明引入自定义组件
首先要在页面的json
文件中进行引用声明, 还要提供对应的组件名和组件路径 index.wxml
{
// 引用声明
"usingComponents": {
"my-header": "/components/myHeader/myHeader"
}
}
1.3 页面中使用自定义组件
<!-- 自定义组件测试 -->
<view>
<!-- 以下是对一个自定义组件的引用 -->
<my-header inner-text="Some text">
<view>用来替代slot的</view>
</my-header>
</view>
2. 其他属性
Component 构造器可⽤于定义组件,调⽤ Component 构造器时可以指定组件的属性、数据、⽅法
等。
定义段 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map |
否 | 组件的对外属性, 是属性名到属性设置的映射表, 参见下文 |
data | Object | 否 | 组件的内部数据, 和properties 一同用于组件的模板渲染 |
observers | Object | 否 | 组件数据字段监听器, 用于监听properties 和 data 的变化 |
methods | Object | 否 | 组件的方法, 包括事件响应函数和任意的自定义方法 |
created | Function | 否 | 组件生命周期函数, 在组件实例刚刚被创建时执行, 注意此时不能调用setData |
attached | Function | 否 | 组件生命周期函数, 在组件实例进入页面节点树时执行 |
ready | Function | 否 | 组件生命周期函数, 在组件实例进入页面节点树时执行 |
moved | Function | 否 | 组件生命周期函数, 在组件实例被移动到节点树另一个位置时执行 |
detached | Function | 否 | 组件生命周期函数, 在组件实例被从页面节点树移除时执行 |
3. 自定义组件传参
- 父组件通过属性 的方式给子组件传递参数
- 子组件通过事件的方式向父组件传递参数
3.1 过程
- 父组件把数据
{{tabs}}
传递到 子组件 的tabItems
属性中 - 父组件 监听
onMyTab
事件 - 子组件 触发
bindmytap
中的mytap
事件- 自定义组件触发事件时, 需要使用
triggerEvent
方法, 指定事件名
、detail
对象
- 自定义组件触发事件时, 需要使用
- 父 → 子 动态传值
this.selectComponent("#tabs");
父组件代码
// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
内容-这里可以放插槽
</tabs>
// page.js
data: {
tabs:[
{name:"体验问题"},
{name:"商品、商家投诉"}
]
},
onMyTab(e){
console.log(e.detail);
},
子组件代码
// com.wxml
<view class="tabs">
<view class="tab_title" >
<block wx:for="{{tabItems}}" wx:key="{{item}}">
<view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
<view class="tab_content">
<slot></slot>
</view>
</view>
// com.js
Component({
properties: {
tabItems:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItemActive(e){
this.triggerEvent('mytap','haha');
}
}
})
4. 注意事项
- 标签名 是 中划线的方式
-
- 属性名的方式 也是要中划线的方式
- 其他情况可以使用驼峰命名
- 组件的文件名如
myHeader.js
的等 - 组件内的要接收的属性名 如
innerText
- 组件的文件名如
内容来源于网络如有侵权请私信删除
文章来源: 博客园
原文链接: https://www.cnblogs.com/long-mao-bu-re/p/15178390.html
- 还没有人评论,欢迎说说您的想法!