vue2版本中slot的基本使用詳解

程式猿布歐發表於2022-03-21
Vue

前言

在vue的開發過程中，我們會經常使用到vue的slot插槽元件，vue官方文件的描述：

Vue 實現了一套內容分發的 API，這套 API 的設計靈感源自 Web Components 規範草案，將 元素作為承載分發內容的出口

slot大概分為以下幾種：

基礎slot元件(匿名插槽)

匿名插槽主要使用場景並不涉及特別複雜的業務，更像是純展示元件內容

<!--子元件-->

<template>
	<span>
		我是基礎slot子元件, 父元件傳過來的值:
		<span style="color: red"><slot></slot></span>
	</span>
</template>


<!--父元件-->

<li>
    基礎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傳過來的內容</p>
    	</template>
    	<template v-slot:name2>
    		<p>name2傳過來的內容</p>
    	</template>
    </Specific>
</li>

import Specific from "./Specific.vue";

作用域插槽

作用域插槽，子元件提供資料，父元件接收子元件的值並展示和處理邏輯

<!--子元件-->

<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返回的資料：
			<span style="color: red">
				{{ childData.scopeData }}
			</span>
		</template>
	</Scope>
</li>

import Specific from "./Specific.vue";

解構插槽

解構插槽，類似在js書寫物件過程中的物件解構

{ 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>解構插槽</p>
	<Deconstru>
		<template v-slot="{ user: person }">
			父元件模板：{{ person.name }},{{ person.age }}
		</template>
	</Deconstru>
</li>

import Specific from "./Deconstru.vue";

以上例子均已上傳至開源倉庫，後續關於vue的學習筆記均會更在在該專案上，歡迎star

總結

在vue的插槽文件中，還有包含

<template #footer>
    <p>Here's some contact info</p>
  </template>

詳細關於插槽的官方文件傳送門

https://cn.vuejs.org/v2/guide/components-slots.html

文章個人部落格地址：vue2版本中slot的基本使用詳解

創作不易，轉載請註明出處和作者。

相關文章