小程序的插槽以及button分享、授權樣式改變的應用

插槽：插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制

關鍵點： 子組件決定在哪顯示   父組件決定組件長啥樣並且顯示不顯示

小程序插槽的使用：

1、在子組件指定位置定義solt組件標簽

<view>
  <text>我是標准的</text>
  <!--下面是slot插槽（占位），用於承載組件引用時提供的子節點-->
  <slot></slot>
</view>

2、在json文件中引入子組件

{
  "usingComponents": {
    "v-tag": "/components/tag/index",
}

3、啟用插槽（這個容易忘記，一定要啟用插槽才能生效）

Component({
  // 在子組件js的Component中開啟插槽
  options: {
    multipleSlots: true
  }
})

 

4、在父組件中定義組件的內容

<v-tag>
<!-- 下面這部分內容將被放置在組件 <slot> 的位置上 -->
  <view>我是定制的內容</view>
</v-tag>

注：如上，父組件或者頁面的內容包括樣式就應用到子組件中並顯示

　　如果是多個組件的話，可以在子組件的插槽中命名，這樣在父組件中同樣根據插槽的名稱定義插入的內容

<view>
 <text>我是標准的</text>
 <!--下面是slot插槽（占位），用於承載組件引用時提供的子節點-->
 <slot name="custom1"></slot>
 <slot name="custom2"></slot>
</view>

<f-music>
<view slot="custom2">我是定制的內容2</view>
</f-music>
<f-music>
<!-- 下面這部分內容將被放置在組件 <slot> 的位置上 -->
  <view slot="custom1">我是定制的內容1</view>
  <view slot="custom2">我是定制的內容2</view>
</f-music>

 

改變button的樣式

小程序的button除了承擔button按鈕簡單的功能外，在分享、授權的時候，小程序是必須使用button組件，用戶點擊該組件觸發分享、授權等操作，但是button是一個按鈕，作為分享組件樣式並不合適。為解決這樣一個問題，我們可以封裝一個組件，來定義不同的功能，父組件傳遞不同的內容進去。如下圖，分享和授權的按鈕需要實現如下的樣子：

 

 

 

 

 

 類似於這樣的一些button，我們可以封裝在一個組件中，在父組件中只需要傳遞不同樣式圖片就可以達到上面的效果，具體如下

1、在components下面新建一個button-image的文件夾，存放組件

2、在wxml中定義button組件，定義插槽，定義button類型（open-type）這個需要從父組件中傳遞進來具體的類型，getuserinfo代表獲取用戶的信息

<button bind:getuserinfo="onGetUserInfo" 
    open-type='{{openType}}'  plain='{{true}}'
     class="container">
  <slot name="img"></slot>
</button>

3、在js文件中開啟插槽、將自定義的onGetUserInfo方法激活，傳給父組件

// 開啟插槽
options: {
    multipleSlots: true
}

// 激活方法
methods: {
    onGetUserInfo(event) {
      this.triggerEvent('getuserinfo', event.detail, {})
    }
  }

4、使用組件  在需要引入頁面的json文件中引入子組件

{
  "usingComponents": {
    "v-button": "/components/image-button/index"
  }
}

5、在頁面指定位置使用子組件

<view class='header'>
    <v-epsoide class="epsoide" index="{{classicData.index}}" />
    <view class="like-container">
      <v-like class="like" bind:like="onLike" like="{{likeStatus}}" count="{{likeCount}}" />
<!--使用子組件，傳入組件類型已經插槽的內容-->
      <v-button class="share-btn" open-type="share">
        <image class="share" slot="img" src="/images/icon/share.png" />
      </v-button>      
    </view>
  </view>

授權組件類似