日韩av片无码一区二区,亚洲天堂一区二区无码

讓你的組件千變?nèi)f化，Vue slot 剖玄析微

以下文章來源于政采云前端團(tuán)隊(duì) ，作者季節(jié)

本文首發(fā)于政采云前端團(tuán)隊(duì)博客：讓你的組件千變?nèi)f化，Vue slot 剖玄析微

https://www.zoo.team/article/slot

（一）前言

Vue 代碼中的 slot 是什么，簡單來說就是插槽。<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽，傳入內(nèi)容后 <slot> 元素自身將被替換。

看了上面這句官方解釋，可能一樣不知道 slot 指的是什么，那么就來看看在 Vue 中，什么時候你需要用到 slot 。

舉例：一個組件的展示層你需要做到大體結(jié)構(gòu)固定，但其內(nèi)的部分結(jié)構(gòu)可變，樣式表現(xiàn)不固定。例如 Button 中是否顯示 icon，或者 Modal 框的中間內(nèi)容展示區(qū)域的變化等，要通過子組件自己實(shí)現(xiàn)是不可能的。組件并不直接支持 HTML DOM 結(jié)構(gòu)的傳遞，此時就可以通過使用 slot 作為 HTML 結(jié)構(gòu)的傳遞入口來解決問題。

（二）v-slot 用法
在 2.6.0 版本中，Vue 為具名插槽和作用域插槽引入了一個新的統(tǒng)一的語法（即 <v-slot> 指令）。它取代了 slot 和 slot-scope 這兩個目前已被廢棄、尚未移除，仍在文檔中的特性。

使用方法可以分為三類：默認(rèn)插槽、具名插槽以及作用域插槽。

◎ 默認(rèn)插槽
子組件編寫：在組件中添加 <slot> 元素，來確定渲染的位置。
// 子組件
<template>
<div class="content">
    
    <header class="text">
      
      <slot>默認(rèn)值</slot>
    </header>
</div>
</template>
父組件編寫：任何沒有被包裹在帶有 v-slot 的 <template> 中的內(nèi)容都會被視為默認(rèn)插槽的內(nèi)容。當(dāng)子組件只有默認(rèn)插槽時， <v-slot> 標(biāo)簽可以直接用在組件上，也就是獨(dú)占默認(rèn)插槽的寫法

// 父組件
<template>
<div class="container">
    
    <child>
      任意內(nèi)容
      <template>內(nèi)容</template>
      中間內(nèi)容
      
    </child>

    
    <child v-slot="slotProps">
      當(dāng)只有默認(rèn)插槽時，此為獨(dú)占默認(rèn)插槽的縮寫<br>
      如果組件中有其他具名插槽，這么寫會報錯<br>
      slotProps 取的是，子組件標(biāo)簽 slot 上屬性數(shù)據(jù)的集合
    </child>
</div>
</template>
渲染結(jié)果

◎ 具名插槽
子組件編寫：當(dāng)需要使用多個插槽時，為 <slot> 元素添加 name 屬性，來區(qū)分不同的插槽，當(dāng)不填寫 name 時，默認(rèn)為 default 默認(rèn)插槽。
// 子組件
<template>
<div class="content">
    
    <main class="text">
      <slot name="main"></slot>
    </main>
    <footer class="text">
      <slot name="footer"></slot>
    </footer>
</div>
</template>
父組件編寫：<template> 標(biāo)簽中添加 v-slot:xxx 或者 #xxx 屬性的內(nèi)容， # 代表插槽的縮寫。

// 父組件
<template>
<div class="container">
    
    <child>
      <template v-slot:main>
        <a target="_blank">導(dǎo)航</a>
      </template>
      <template #footer>頁腳（具名插槽的縮寫#）</template>
      <template #footer>
        
        v-slot只會添加在一個 template 上面
      </template>
    </child>
</div>
</template>
渲染結(jié)果

◎ 作用域插槽
子組件編寫：有時讓父組件能訪問到子組件中的數(shù)據(jù)是很有用的，我們可以將綁定在 <slot> 元素上的特性稱為插槽 Prop ，當(dāng)然也可以傳遞一些 Function。
// 子組件
<template>
<div class="content">
    
    <footer class="text">
      <slot name="footer" :user="user" :testClick="testClick">
        {{user.name}}
      </slot>
    </footer>
</div>
</template>

<script>
export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '測試title',
          name: '測試name'
        }
      };
    },
    methods:{
      testClick(){
          // 子組件通用方法，可傳遞給父組件復(fù)用
        alert('123');
      }
    }
};
</script>
父組件編寫：被綁定的屬性的集合對象，在父元素中會被 v-slot:xxx="slotProps" 或者 #xxx="slotProps" 接收，xxx 代表具名插槽的 name ，slotProps 為子組件傳遞的數(shù)據(jù)對象，可以重命名。

// 父組件
<template>
<div class="container">
    
    <child>
      <template #footer="slotProps">
        {{slotProps.user.title}}
        <button @click="slotProps.testClick">點(diǎn)我</button>
      </template>
      <template #footer="{user,testClick}">
        {{user.title}}<br>
        此為解構(gòu)插槽prop<br>
        
        <button @click="testClick">點(diǎn)我</button>
      </template>
    </child>
</div>
</template>

<script>
import Child from './component/child.vue';
export default {
    name: 'demo',
    components: {
      Child
    },
};
</script>

渲染結(jié)果

◎ 其他拓展
解構(gòu)插槽 prop 可以重命名，例如：v-slot="{ user: person }" 將 user 對象重命名為 person 使用。
解構(gòu)插槽 prop 可以賦值默認(rèn)值，例如：v-slot="{ user = { name: 'Guest' } }" 給屬性添加自定義后備內(nèi)容。
動態(tài)插槽命名，例如：v-slot:[dynamicSlotName] ，支持命名變量定義。
◎ 注意事項(xiàng)
v-slot 只能用在 template 上面，或者是獨(dú)占默認(rèn)插槽的寫法。

父組件引用時，重復(fù)定義了 v-slot 的 name 后只會加載最后一個定義的插槽內(nèi)容。

當(dāng)子組件只有默認(rèn)插槽時，才可以使用獨(dú)占默認(rèn)插槽的縮寫語法，只要出現(xiàn)多個插槽，必須使用完整的基于 template 的語法。

（三）slot 以及 slot-scope 的用法
介紹完 v-slot 的基本用法，這里我們也順帶介紹一下之前的 slot 和 slot-scope 的用法以及區(qū)別。

◎ 子組件編寫
子組件的編寫方式?jīng)]什么區(qū)別，下面是一個集合
// 子組件
<template>
<div class="content">
    
    <header class="text">
      <slot>默認(rèn)值</slot>
    </header>

    
    <main class="text">
      <slot name="main"></slot>
    </main>

    
    <footer class="text">
      <slot name="footer" :user="user" :testClick="testClick">
        {{user.name}}
      </slot>
    </footer>
</div>
</template>

<script>
export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '測試title',
          name: '測試name'
        }
      };
    }
};
</script>
◎ 父組件編寫
具名插槽：直接使用 slot 屬性，傳值為子組件插槽的 name 屬性。

作用域插槽：通過 slot-scope 屬性來接受子組件傳入的屬性集合，其他用法一致。
// 父組件
<template>
<div class="container">
    <child>
      
      <div>默認(rèn)插槽</div>

      
      <div slot="main">具名插槽</div>
      <div slot="main">具名插槽2</div>

      
      <div slot="footer" slot-scope="slotProps">
        {{slotProps.user.title}}
      </div>
    </child>
</div>
</template>

<script>
import Child from './component/child.vue';
export default {
    name: 'demo',
    components: {
      Child
    },
};
</script>
最終渲染

◎ 需要注意
不同于 v-slot 的是，slot 中同名可以重復(fù)定義多次。

slot 可以直接定義在子組件上。

v3.0 版本后不可使用 slot ，建議直接使用 v-slot 。

（四）總結(jié)
插槽的 <slot> 的可復(fù)用特性，可以用來寫一些組件結(jié)構(gòu)固定，內(nèi)容可替換的組件，例如表格，列表，按鈕，彈窗等內(nèi)容。
插槽可以傳遞屬性值或者 function 的特性，可以在子組件中寫一些通用的函數(shù)，例如通用的報錯提示等，傳遞給父組件復(fù)用

作者：季節(jié)

歡迎關(guān)注微信公眾號：前端民工

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端