馬扎糖女孩

導(dǎo)航

公告

vue學(xué)習(xí)之插槽

插槽

插槽（Slot）是Vue提出來(lái)的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。

個(gè)人理解：我感覺(jué)插槽就是父組件控制插槽的內(nèi)容。他是用什么標(biāo)簽展示的，以及他要展示的內(nèi)容。子組件來(lái)控制插槽插入的位置。

插槽的分類(lèi)：插槽分為三種。匿名插槽，具名插槽，還有作用域插槽

匿名插槽：也就是默認(rèn)插槽。把父組件中的內(nèi)容默認(rèn)插入到子組件的中<slot></slot>只的位置。

下面是展示在頁(yè)面中的效果

具名插槽：具名插槽會(huì)把就是子組件會(huì)把他的每個(gè)插槽都賦予一個(gè)名字（name）。然后子組件會(huì)根據(jù)父組件中所攜帶的指令參數(shù)來(lái)把父組件中的內(nèi)容插入到相應(yīng)的位置。

如果slot插槽沒(méi)有給名字，那么這個(gè)插槽就相當(dāng)于默認(rèn)插槽，父組件中v-slot不傳參的值就會(huì)插入到這里。

// 這是父組件 
<div class="father">
    <p>我是父組件</p>
    <!-- 引入子組件 -->
    <basepage>
      <template v-slot:header>
        <!-- 放入要插入在子組件中的內(nèi)容 -->
        <p class="con">我是父組件插入的header內(nèi)容</p>
        <br>
      </template>
      <template v-slot:footer>
        <!-- 放入要插入在子組件中的內(nèi)容 -->
        <p class="con">我是父組件插入的footer內(nèi)容</p>
      </template>
      <P>我是父組件中不攜帶參數(shù)的那個(gè)</P>
      <br>
    </basepage>
  </div>

//這是子組件

　　<template>
  　　<div class="son">
    　　<p>我是子組件</p>
    　　<br>
    　　<p>下面是父組件插入的內(nèi)容:</p>
    　　<br>
    　　<template>
      　　<!-- v-slot中參數(shù)為header的將插入這里 -->
      　　<slot name="header"></slot>
      　　<!-- 父組件中不傳遞參數(shù)的將插入這里 -->
      　　<slot ></slot>
      　　<!-- v-slot中參數(shù)為footer的將插入這里 -->
      　　<slot name="footer"></slot>
    　　</template>
  　　</div>
　　</template>

展示的效果

作用域插槽：實(shí)現(xiàn)父組件可以訪(fǎng)問(wèn)子組件里面的數(shù)據(jù)

用通俗的話(huà)來(lái)講就是父組件替換子組件當(dāng)中的標(biāo)簽，但是內(nèi)容由子組件來(lái)提供。

// 父組件哈
<div class="father">
    <p>我是父組件</p>
    <!-- 引入子組件 -->
    <basepage>
      <template  v-slot='news'>
        <!-- 放入要插入在子組件中的內(nèi)容 -->
        <p class="con">我是父組件插入的footer內(nèi)容</p>
        <br>
        <p>我是子組件中的內(nèi)容:{{news.info}}</p>
      </template>
    </basepage>
  </div>


// 子組件
<template>
  <div class="son">
    <p>我是子組件</p>
    <br>
    <p>下面是父組件插入的內(nèi)容:</p>
    <br>
    <template>
      <slot :info='message'></slot>
    </template>
  </div>
</template>
<script>
export default {
  name:'basepage',
  data() {
    return {
      message:"加油呀"
    }
  }
}

補(bǔ)充一些特殊的情況

補(bǔ)充一：我們可以在子組件中的slot中寫(xiě)入一些標(biāo)簽，如果父組件中沒(méi)有寫(xiě)入標(biāo)簽時(shí)，那么就默認(rèn)展示子組件中的把標(biāo)簽及內(nèi)容，

// 父組件  
<div class="father">
    <p>我是父組件</p>
    <!-- 引入子組件 -->
    <basepage>
    </basepage>
  </div>

// 子組件

<template>
  <div class="son">
    <p>我是子組件</p>
    <br>
    <p>下面是父組件插入的內(nèi)容:</p>
    <br>
    <template>
      <P>今天很開(kāi)心啊,嘻嘻</P>
    </template>
  </div>
</template>

補(bǔ)充二：v-slot在有插槽名字的情況下可以簡(jiǎn)寫(xiě)為#，在沒(méi)有插槽的情況下不能這么寫(xiě)哈。

<!-- 這樣會(huì)觸發(fā)一個(gè)警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>
如果你希望使用縮寫(xiě)的話(huà)，你必須始終以明確插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

補(bǔ)充三：關(guān)于作用域插槽和具名插槽放一塊的寫(xiě)法。

// 這是父子組件中引入的子組件
<div >
<p>我是父組件</p>
<children>
　　　　　　// 直接在名字后面附上綁定的值就好
　　　　　　<template  v-slot:fagognzi='content'>
                <!-- 按鈕 -->
                <div v-if="rendWage(content.item, content.index)">
                    <el-button type="danger" size="small" plain round @click="onPaysendWage(content.item)">發(fā)工資</el-button>
                </div>
            </template>

</children>

插槽的分享就到這里了，希望大家能有一些收獲哈，也請(qǐng)大神們多多指教。

posted on 2019-11-10 17:36 牛扎糖女孩閱讀(255) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部