欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文詳解Vue中插槽的具體使用

 更新時間：2023年06月14日 14:57:36   作者：加油樂  
Vue的插槽（Slot）是一種可以讓父組件向子組件傳遞內(nèi)容的機制，這篇文章主要通過一些簡單的示例為大家介紹了插槽的具體使用，感興趣的小伙伴可以了解一下

一、前言

插槽就像放在組件中的占位標簽，使用組件時我們將要放到占位標簽處的DOM結(jié)構(gòu)寫入組件標簽體中即可。

通俗點來講，插槽就是在自定義組件中預留一個位置，這個位置的內(nèi)容可以由使用組件的人來定義，可以通過屬性等數(shù)據(jù)實現(xiàn)動態(tài)的內(nèi)容展示及交互，具有高度的靈活性，。

二、匿名插槽

義組件時，在需要由用戶自定義的區(qū)域使用<slot></slot>占位，使用組件時，在組件的標簽之間通過<template></template>定義要往插槽中填充的內(nèi)容。示例代碼：

定義組件

如果在定義組件時沒有使用<slot></slot>占位，即使在使用組件時在組件標簽之間定義了內(nèi)容，也會被忽略。

//定義一個組件Box
<template>
    <div>
        <div>這是一個定義了插槽的組件</div>
        <slot></slot>
        <div>組件其它內(nèi)容</div>
    </div>
</template>

使用組件

//使用上面的組件
<Box>
   <template>
       <div>插槽中展示的內(nèi)容</div>
   </template>
</Box>

對應關(guān)系

三、后備內(nèi)容

此處所說的后備內(nèi)容是官方文檔里面的叫法，實際上就是指插槽的默認值。在定義組件時，可以在<slot><slot>之間給出插槽的默認內(nèi)容，也就是說當使用插槽時如果沒有在組件標簽內(nèi)定義插槽的內(nèi)容，則默認內(nèi)容生效，否則默認內(nèi)容不生效。例如：

定義組件插槽設(shè)置默認內(nèi)容

//定義一個組件Box
<template>
    <div>
        <div>這是一個定義了插槽的組件</div>
        <!-- 通過slot定義了一個插槽,并在插槽中給出了默認值 -->
        <slot>
            <div>這是插槽的默認內(nèi)容</div>
        </slot> 
        <div>組件其它內(nèi)容</div>
    </div>
</template>

不使用默認值，覆蓋

<Box>
    <template>
        <div>插槽中展示的內(nèi)容</div>
    </template>
</Box>

此時頁面呈現(xiàn)的內(nèi)容為：

使用默認值

<Box></Box>

此時頁面呈現(xiàn)的內(nèi)容為：

四、具名插槽（命名插槽）

每個插槽都有一個名字，當一個組件中只有一個插槽時，我們可以不用指定插槽的名稱，此時插槽的名稱為：default。如果一個組件中有多個插槽，我們必須為每個插槽制定名稱，否則無法向插槽填充對應的內(nèi)容。

在組件定義時為solt制定name屬性，使用組件時，通過v-slot:插槽名稱，指定插入到哪個插槽。v-slot必須使用在template標簽上，v-slot:插槽名稱可以簡寫為#插槽名稱,推薦使用簡寫。示例：

定義組件

<template>
    <div class="box">
        <span>我是組件的內(nèi)容</span>
        <div class="slots">
            <!-- 定義名字為left的插槽 -->
            <div class="left">
                <slot name="left"></slot>
            </div>
            <!-- 定義名字為center的插槽 -->
            <div class="center">
                <slot name="center"></slot>
            </div>
            <!-- 定義名字為right的插槽 -->
            <div class="right">
                <slot name="right"></slot>
            </div>
        </div>
        <div>組件其他內(nèi)容</div>
    </div>
</template>

使用組件

<Box>
      <!-- 使用v-slot:插槽名字 -->
      <template v-slot:left>
        我是left插槽的內(nèi)容
      </template>
      <!-- 使用#插槽名字 -->
      <template #center>
        我是center插槽的內(nèi)容
      </template>
      <template #right>
        我是right插槽的內(nèi)容
      </template>
</Box>

效果展示

五、作用域插槽

定義組件Box

定義組件時為slot增加了name和data屬性，name為slot的名稱，data為自定義屬性。

<template>
    <div class="box">
        <span>我是組件的內(nèi)容</span>
        <div class="slotBox">
            <slot name="slotBox1" :data="list"></slot>
            <slot name="slotBox2" :data="list"></slot>
        </div>
        <div>組件其他內(nèi)容</div>
    </div>
</template>
<script>
export default {
    name: "slotPiece",
    data() {
        return {
            list: [{
                txt: '內(nèi)容1',
                id: 1
            }, {
                txt: '內(nèi)容2',
                id: 2
            }, {
                txt: '內(nèi)容3',
                id: 3
            }, {
                txt: '內(nèi)容4',
                id: 4
            }]
        };
    },
}
</script>

使用組件

使用組件時template標簽中指令：#slotBox1="data"，其中#slotBox1是：v-slot:slotBox1的縮寫，data中包含了data屬性值，使用時可以通過data.data或{ data }解構(gòu)數(shù)據(jù)獲取傳過來的消息內(nèi)容，對其進行渲染或修改等操作。

<Box>
      <template #slotBox1="data">
        <!-- 接收過來不解構(gòu)為下面的結(jié)構(gòu)： -->
        <div>
          <div>我是不解構(gòu)的數(shù)據(jù)</div>
          {{ data }}
        </div>
        <!-- 通過屬性取值： -->
        <div>
          <div>通過屬性取值</div>
          {{ data.data }}
        </div>
      </template>
      <!-- 通過{ }結(jié)構(gòu)數(shù)據(jù) -->
      <template #slotBox2="{ data }">
        <div>
          <div>我是解構(gòu)后的數(shù)據(jù)</div>
          {{ data }}
          <div>使用或修改數(shù)據(jù)</div>
          <div v-for="hl in data">內(nèi)容：{{ hl.txt }}</div>
        </div>
      </template>
</Box>

效果展示

以上就是一文詳解Vue中插槽的具體使用的詳細內(nèi)容，更多關(guān)于Vue插槽的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論