1.首先先創(chuàng)建一個(gè)文件夾名字如：component 再在里面創(chuàng)建一個(gè)文件夾Tabs
2.在文件夾中右鍵選擇component . 寫入名字.
3.在page文件中的json中選擇usingComponents 使用鍵值對(duì)的方式
例如----"usingComponents": {
"Tabs":"../../component/tabs/tabs"
}
4.在頁(yè)面中可以直接使用Tabs當(dāng)做標(biāo)簽使用.
自定義組件的使用
直接通過代碼來(lái)解讀.
···這個(gè)是直接創(chuàng)建的自定義組件---可以進(jìn)行直接調(diào)用.
tab.xml
<view class="tabs" >
<view class="tabs_title" >
<!-- <view class="title_item active" >首頁(yè)</view>
<view class="title_item" >原創(chuàng)</view>
<view class="title_item" >分類</view>
<view class="title_item" >關(guān)于</view> -->
<view
wx:for='{{Tabs}}'
wx:key='id'
class="title_item {{item.isActive? 'active':''}}"
bindtap = "handinput" //添加事件
data-index='{{index}}' //傳遞參數(shù) 其中參數(shù)數(shù)組中有兩個(gè)參數(shù) 1.item 2.index 其中item表示該數(shù)組中的某一項(xiàng) 掸哑，而index表示這是數(shù)組的索引.
>
{{item.name}}
</view>
</view>
<view class="tabs_content" >
<slot> </slot> //這個(gè)是個(gè)占位符.
</view>
</view>
····其中這個(gè)slot是占位符 ，
····data-index='{{index}}' 傳遞索引
這個(gè)是tab.js對(duì)里面的事件進(jìn)行修改
// component/tabs/tabs.js
Component({
/**
* 組件的屬性列表
*
* 父組件-----》子傳遞.
**/
properties: {
//接收數(shù)據(jù)的名稱 必須要和頁(yè)面上的名稱一致
// aaa:{
// //type 表示接收的數(shù)據(jù)類型
// type:String,
// //表示默認(rèn)值 ，若是沒有就是這個(gè)值
// value:''
// },
Tabs:{
type:Array,
value:[]
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
* 1.頁(yè)面的函數(shù)需要放到Data的同層級(jí)下！＝舫！
* 2.組件中需要放到method中.Ａバ！Ｂ┮妗！
*/
methods: {
handinput(e){
//可能是因?yàn)槌Ａ克孕枰⒁?
const {index} =e.currentTarget.dataset; //獲取傳遞進(jìn)來(lái)的參數(shù).
this.triggerEvent("itemChange",{index}); //這個(gè)是將組件的參數(shù)傳遞到頁(yè)面上.
//this.data獲取data中的數(shù)組.兩種意思相同.
// let {Tabs}=this.data;
// let Tabs=this.data.Tabs;
// Tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false);
// this.setData({
// Tabs:Tabs
// })
}
}
})
···父組件傳參數(shù)給組件
···事件跟頁(yè)面有些區(qū)別 只能放到 methods中
···this.triggerEvent("itemChange",{index}); //這個(gè)是將組件的參數(shù)傳遞到頁(yè)面上. itemChange傳遞的名字 深胳， index傳遞的數(shù)據(jù).
··· Tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false);這個(gè)foreach循環(huán)會(huì)將數(shù)組中的數(shù)據(jù)在循環(huán)中改變.--->Tabs ,v是里面的數(shù)組 绰疤，i是索引.
頁(yè)面的調(diào)用自定義的組件
demo16.xml
1.父組件（頁(yè)面） 向子組件 傳遞數(shù)據(jù) 通過 標(biāo)簽屬性的方式
1.在子組件上進(jìn)行接收.
-->
<Tabs Tabs="{{Tabs}}" binditemChange="handins">
<view wx:if="{{Tabs[0].isActive}}">0</view>
<view wx:if="{{Tabs[1].isActive}}">1</view>
<view wx:if="{{Tabs[2].isActive}}">2</view>
<view wx:if="{{Tabs[3].isActive}}">3</view>
</Tabs>
···其中這個(gè)組件中的內(nèi)容就是組件的占位符.
···直接寫組件的名字， 進(jìn)行使用.
···Tabs="{{Tabs}}"--------------------------
1.父組件（頁(yè)面） 向子組件 傳遞數(shù)據(jù) 通過 標(biāo)簽屬性的方式舞终，父組件（頁(yè)面）
向子組件 傳遞數(shù)據(jù) 通過 標(biāo)簽屬性的方式.
··· binditemChange="handins" 子組件向父組件傳遞內(nèi)容.------------------------
demo.js
// pages/demo16/demo16.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
Tabs:[
{
id:0,
name:'首頁(yè)',
isActive:true
},
{
id:1,
name:'原創(chuàng)',
isActive:false
},
{
id:2,
name:'分類',
isActive:false
},
{
id:3,
name:'關(guān)于',
isActive:false
}
]
},
handins(e){
const index=e.detail.index; //獲取組件傳遞過來(lái)的參數(shù)
let Tabs=this.data.Tabs;
Tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false);
this.setData({
Tabs:Tabs
})
console.log(e);
}
})
···===是比較相等的.
