微信小程序开发(七)-自定义组件
一 . 自定义组件
类似vue或者react中的自定义组件
1. 创建⾃定义组件
类似于页面，一个自定义组件由 json,wxml,wxss,js,4个文件组成
在⽂件夹内 components/myHeader，创建组件 名为 myHeader
2.声明组件
⾸先需要在组件的 json⽂件中进⾏⾃定义组件声明
myHeader.json
{
"component": true
}
3. 注册组件
在组件的 js⽂件中，需要使⽤ Component()来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法
myHeader.js
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
4.声明引⼊⾃定义组件
⾸先要在⻚⾯的 json⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
index.wxml
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"my-header":"/components/myHeader/myHeader"
}
}
5.⻚⾯中使⽤⾃定义组件
<view> <!-- 以下是对一个自定义组件的引用 --> <my-header inner-text="Some text"> <view>用来替代slot的</view> </my-header> </view>
6.定义段与⽰例⽅法
Component构造器可⽤于定义组件，调⽤ Component构造器时可以指定组件的属性、数据、⽅法等。
7.组件-⾃定义组件传参
1. ⽗组件通过属性的⽅式给⼦组件传递参数
2. ⼦组件通过事件的⽅式向⽗组件传递参数
过程：
1. ⽗组件 把数据 {{tabs}}传递到 ⼦组件的 tabItems属性中
2. ⽗组件 监听 onMyTab事件
3. ⼦组件 触发 bindmytap中的 mytap事件
a,⾃定义组件触发事件时，需要使⽤ triggerEvent⽅法，指定 事件名、 detail
4. ⽗ -> ⼦ 动态传值 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');
}
}
})
