vue 2.6.0 中遏插，為具名插槽和作用域插槽引入了一個(gè)新的統(tǒng)一的語(yǔ)法 (即
v-slot指令)舷夺。它取代了slot和slot-scope這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute言缤。新語(yǔ)法的由來(lái)可查閱這份 RFC。
在接下來(lái)所有的 2.x 版本中 slot 和 slot-scope attribute 仍會(huì)被支持链快，但已經(jīng)被官方廢棄且不會(huì)出現(xiàn)在 Vue 3 中
本文基于以上背景凡辱，研究v-slot和slot 和 slot-scope使用上的區(qū)別。
1秒紧、代碼
<!DOCTYPE html>
<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
<meta charset="UTF-8">
<title>slot插槽不同版本使用方式-2.6.0分割</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<style>
#app {
display: flex;
}
strong {
color: #57eeff;
}
.article {
flex: 1;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<!--2.6.0及以上寫法-->
<el-article :article="article">
<!--v-slot:sub-title 可簡(jiǎn)寫為 #sub-title-->
<template v-slot:sub-title>
<h5>-插槽的使用</h5>
</template>
<template v-slot:content>
<p>content1</p>
</template>
<p>main1</p>
<template v-slot:content>
<p>content2</p>
</template>
<p>main2</p>
<template v-slot:footer="{date}">
<p>{{date}}</p>
</template>
</el-article>
<!--2.6.0-寫法-->
<el-article :article="article">
<h5 slot="sub-title">-插槽的使用</h5>
<template slot="content">
<p slot="content">content1</p>
</template>
<p>main1</p>
<template slot="content">
<p>content2</p>
</template>
<p>main2</p>
<template slot="footer" slot-scope="{date}">
<p>{{date}}</p>
</template>
</el-article>
</div>
<script>
Vue.component('el-article', {
props: ['article'],
data() {
return {
date: new Date()
}
},
template: `
<article class="article">
<header>
<strong>header：</strong>
<h1>{{article.title}}</h1>
<slot name="sub-title"></slot>
<p>作者：{{article.author}}</p>
<hr/>
</header>
<main>
<strong>content：</strong>
<slot name="content"></slot>
<slot></slot>
<hr/>
</main>
<footer>
<strong>footer：</strong>
<slot name="footer" :date="date"></slot>
<hr/>
</footer>
</article>
`
});
new Vue({
el: '#app',
data: {
article: {
title: 'vue.js 從入門到精通',
author: 'Ada'
}
}
});
</script>
</body>
</html>
2绢陌、界面效果
界面效果
3、使用總結(jié)
-
v-slot可以用#簡(jiǎn)寫 v-slot:prop 等價(jià)于 slot="prop"-
v-slot:prop="slotProps" 等價(jià)于 slot="prop" slot-scope="slotProps"就寫法上來(lái)講熔恢，這樣寫方便點(diǎn) - v-slot指令只能用在 template或組件中
- v-slot指令后面跟prop 若出現(xiàn)多個(gè)同類插槽 僅生效最后一個(gè)脐湾。不添加v-slot指令，都生效（屬于默認(rèn)插槽<slot></slot>）
- 2.6.0之前的版本 插槽 可以出現(xiàn)多個(gè)同類的插槽绩聘。插槽可以在component沥割、template、dom使用
- 如果在dom元素里使用指令prop最好使用kebab-case凿菩，大小寫識(shí)別不出（
v-slot識(shí)別不了机杜，slot沒有影響） - 官方文檔
