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

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

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

一、前言

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

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

二、匿名插槽

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

定義組件

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

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

使用組件

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

對(duì)應(yīng)關(guān)系

三、后備內(nèi)容

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

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

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

不使用默認(rèn)值，覆蓋

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

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

使用默認(rèn)值

<Box></Box>

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

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

每個(gè)插槽都有一個(gè)名字，當(dāng)一個(gè)組件中只有一個(gè)插槽時(shí)，我們可以不用指定插槽的名稱(chēng)，此時(shí)插槽的名稱(chēng)為：default。如果一個(gè)組件中有多個(gè)插槽，我們必須為每個(gè)插槽制定名稱(chēng)，否則無(wú)法向插槽填充對(duì)應(yīng)的內(nèi)容。

在組件定義時(shí)為solt制定name屬性，使用組件時(shí)，通過(guò)v-slot:插槽名稱(chēng)，指定插入到哪個(gè)插槽。v-slot必須使用在template標(biāo)簽上，v-slot:插槽名稱(chēng)可以簡(jiǎn)寫(xiě)為#插槽名稱(chēng),推薦使用簡(jiǎn)寫(xiě)。示例：

定義組件

<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

定義組件時(shí)為slot增加了name和data屬性，name為slot的名稱(chēng)，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>

使用組件

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

<Box>
      <template #slotBox1="data">
        <!-- 接收過(guò)來(lái)不解構(gòu)為下面的結(jié)構(gòu)： -->
        <div>
          <div>我是不解構(gòu)的數(shù)據(jù)</div>
          {{ data }}
        </div>
        <!-- 通過(guò)屬性取值： -->
        <div>
          <div>通過(guò)屬性取值</div>
          {{ data.data }}
        </div>
      </template>
      <!-- 通過(guò){ }結(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中插槽的具體使用的詳細(xì)內(nèi)容，更多關(guān)于Vue插槽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論