一 . 自定义组件
myHeader.json { "component": true }
3. 注册组件
myHeader.js Component({ properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 innerText: { // 期望要的数据是 string类型 type: String, } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function(){} } })
4.声明引??定义组件
index.wxml // 引用声明 "usingComponents": { // 要使用的组件的名称 // 组件的路径 "my-header":"/components/myHeader/myHeader" } }
5.??中使??定义组件
<view> <!-- 以下是对一个自定义组件的引用 --> <my-header inner-text="Some text"> <view>用来替代slot的</view> </my-header> </view>
6.定义段与?例?法
// 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‘); } } })
原文:https://www.cnblogs.com/feifan1/p/12817120.html