元件傳遞

Created: Sep 12, 2020 4:36 PM
分類: 元件

父傳子

寫上父標籤需要用到的屬性

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">

在父標籤的json檔案中定義屬性

"usingComponents": {
    "Tabs": "/components/Tabs/Tabs"
  }

在子元件中接收屬性

Component({
    properties: {
        tabs:{
            type:Array,
            value:[]
        }
    }
});
 

使用相關屬性

<view class="tabs">
    <view class="tabs_title">
        <view
                wx:for="{{tabs}}"
                wx:key="id"
                bindtap="handleItemTap"
                data-index="{{index}}"
                class="title_item {{item.isActive?'active':''}}">
            {{item.value}}
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>
 

子元件觸發父元件事件

先把標籤繫結一個事件

<view class="tabs">
    <view class="tabs_title">
        <view
                wx:for="{{tabs}}"
                wx:key="id"
                bindtap="handleItemTap"
                data-index="{{index}}"
                class="title_item {{item.isActive?'active':''}}">
            {{item.value}}
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>
 

在子元件寫一個方法,傳遞事件名,引數

methods: {
        handleItemTap(e){
            const {index}=e.currentTarget.dataset
            this.triggerEvent("tabsItemChange",{index})
        }
    }

在父元件繫結相關的事件

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">

接收傳遞過來的引數,進行

/**
     * 處理啟用樣式
     * @param e 引數
     */
    handleTabsItemChange(e) {
        const {index} = e.detail
        let {tabs} = this.data
        tabs.forEach((v, i) => i == index ? v.isActive = true : v.isActive = false)
        this.setData({
            tabs
        })
    }