快捷導(dǎo)航

vue2中插槽(slot)的基本使用規(guī)范

更新時(shí)間：2022年03月21日 10:56:44 作者：程序猿布?xì)W

插槽（Slot）是Vue提出來的一個(gè)概念,正如名字一樣,插槽用于決定將所攜帶的內(nèi)容,插入到指定的某個(gè)位置,從而使模板分塊,具有模塊化的特質(zhì)和更大的重用性,下面這篇文章主要給大家介紹了關(guān)于vue2中插槽(slot)的基本使用規(guī)范的相關(guān)資料,需要的朋友可以參考下

前言

在vue的開發(fā)過程中，我們會(huì)經(jīng)常使用到vue的slot插槽組件，vue官方文檔的描述：

Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將元素作為承載分發(fā)內(nèi)容的出口

slot大概分為以下幾種：

基礎(chǔ)slot組件(匿名插槽)

匿名插槽主要使用場(chǎng)景并不涉及特別復(fù)雜的業(yè)務(wù)，更像是純展示組件內(nèi)容

<!--子組件-->

<template>
?? ?<span>
?? ??? ?我是基礎(chǔ)slot子組件, 父組件傳過來的值:
?? ??? ?<span style="color: red"><slot></slot></span>
?? ?</span>
</template>

<!--父組件-->

<li>
? ? 基礎(chǔ)slot組件(匿名插槽)：<Base>這是一段父組件傳過來的文字</Base>
</li>

import Base from "./Base.vue";

具名插槽

具名插槽，需要在父組件和子組件約定插槽名稱

<!--子組件-->

<template>
?? ?<span>
?? ??? ?<span style="color: red">
?? ??? ??? ?<slot name="name1"></slot>
?? ??? ??? ?<slot name="name2"></slot>
?? ??? ?</span>
?? ?</span>
</template>

<!--父組件-->

<li>
? ? <p>具名插槽：</p>
? ? <Specific>
? ? ?? ?<template v-slot:name1>
? ? ?? ??? ?<p>name1傳過來的內(nèi)容</p>
? ? ?? ?</template>
? ? ?? ?<template v-slot:name2>
? ? ?? ??? ?<p>name2傳過來的內(nèi)容</p>
? ? ?? ?</template>
? ? </Specific>
</li>

import Specific from "./Specific.vue";

作用域插槽

作用域插槽，子組件提供數(shù)據(jù)，父組件接收子組件的值并展示和處理邏輯

<!--子組件-->

<template>
?? ?<span>
?? ??? ?<span>
?? ??? ??? ?<slot name="scopeName" v-bind:scopeData="age"></slot>
?? ??? ?</span>
?? ?</span>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Scope extends Vue {
?? ?private age: Number = 23;
}
</script>

<!--父組件-->

<li>
?? ?<p>作用域插槽</p>
?? ?<Scope>
?? ??? ?<template v-slot:scopeName="childData">
?? ??? ??? ?作用域子組件slot返回的數(shù)據(jù)：
?? ??? ??? ?<span style="color: red">
?? ??? ??? ??? ?{{ childData.scopeData }}
?? ??? ??? ?</span>
?? ??? ?</template>
?? ?</Scope>
</li>

import Specific from "./Specific.vue";

解構(gòu)插槽

解構(gòu)插槽，類似在js書寫對(duì)象過程中的對(duì)象解構(gòu)

{ data:{ username:1 } }

<!--子組件-->

<template>
?? ?<span>
?? ??? ?<p>
?? ??? ??? ?<slot v-bind:user="user"></slot>
?? ??? ?</p>
?? ?</span>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Deconstru extends Vue {
?? ?private user: Object = {
?? ??? ?name: "zhangsan",
?? ??? ?age: 23,
?? ?};
}
</script>

<!--父組件-->

<li>
?? ?<p>解構(gòu)插槽</p>
?? ?<Deconstru>
?? ??? ?<template v-slot="{ user: person }">
?? ??? ??? ?父組件模板：{{ person.name }},{{ person.age }}
?? ??? ?</template>
?? ?</Deconstru>
</li>

import Specific from "./Deconstru.vue";

以上例子均已上傳至開源倉庫，后續(xù)關(guān)于vue的學(xué)習(xí)筆記均會(huì)更在在該項(xiàng)目上，歡迎star

碼云 https://gitee.com/lewyon/vue-note

githup https://github.com/akari16/vue-note