參考博文：https://blog.csdn.net/weixin_45755816/article/details/120500714
不使用插槽
<!--App.vue 父組件-->
<template>
<div class="container flex flex-row justify-center">
<!--將title和listData數據傳給子組件,下面展示了兩種使用組件方式-->
<Category title="動漫" :listData="cartoons"></Category>
<Category title="游戲" :listData="games"/>
<Category title="電影" :listData="films"/>
</div>
</template>
<script>
import Category from './components/category.vue'
export default {
name: 'App',
components: {
Category
},
data(){
return{
cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
games:['4399','斗地主','王者榮耀','和平精英'],
films:['《你好，李煥英》','《夏洛特煩擾》','《你的名字》','《蜘蛛俠》']
}
}
}
</script>
<style scoped>
.footer a {
@apply ml-10;
}
.container {
background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
@apply h-200 bg-auto bg-cover bg-contain;
}
</style>
<!-- category 組件子-->
<template>
<div>
<h3>{{ title }}分類</h3>
<ul>
<li v-for="(item,index) in listData" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
name:'Category',
//props接收傳過來的數據
props:['listData','title']
}
</script>
<style scoped>
div{
@apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
@apply text-center bg-yellow-600 text-xl;
}
</style>
默認插槽
<!--App.vue 父組件-->
<template>
<div class="container flex flex-row justify-center">
<!--將title和listData數據傳給子組件,下面展示了兩種使用組件方式-->
<Category title="動漫" :listData="cartoons">
<img class="w-60" src="https://img2.baidu.com/it/u=4117582627,679171248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
</Category>
<Category title="游戲" >
<ul>
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
</Category>
<Category title="電影">
<video class="w-60" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</Category>
</div>
</template>
<script>
import Category from './components/category.vue'
export default {
name: 'App',
components: {
Category
},
data(){
return{
cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
games:['4399','斗地主','王者榮耀','和平精英'],
films:['《你好，李煥英》','《夏洛特煩擾》','《你的名字》','《蜘蛛俠》']
}
}
}
</script>
<style scoped>
.footer a {
@apply ml-10;
}
.container {
background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
@apply h-200 bg-auto bg-cover bg-contain;
}
</style>
<!-- category 組件子-->
<template>
<div>
<h3>{{ title }}分類</h3>
<!-- 定義一個插槽，等着組件的使用者(<Category>填充內容</Category>)進行填充 -->
<slot>這里可以填寫默認值，當組件使用者沒有進行填充時，會顯示</slot>
</div>
</template>
<script>
export default {
name:'Category',
//props接收傳過來的數據
props:['listData','title']
}
</script>
<style scoped>
div{
@apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
@apply text-center bg-yellow-600 text-xl;
}
</style>
具名插槽
<!--App.vue 父組件-->
<template>
<div class="container flex flex-row justify-center">
<!--將title和listData數據傳給子組件,下面展示了兩種使用組件方式-->
<Category title="動漫" :listData="cartoons">
<!--使用具名插槽，需要用template標簽包裹着，並使用v-slot:name -->
<template v-slot:center>
<img class="w-60" src="https://img2.baidu.com/it/u=4117582627,679171248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
</template>
<template v-slot:foot>
<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%B6%AF%C2%FE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0">更多照片</a>
</template>
</Category>
<Category title="游戲" >
<template v-slot:center>
<ul>
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
</template>
<template v-slot:foot>
<div class="footer">
<a href="https://www.csdn.net/">手機游戲</a>
<a href="https://www.csdn.net/">電腦游戲</a>
</div>
</template>
</Category>
<Category title="電影">
<template v-slot:center>
<video class="w-60" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</template>
<template v-slot:foot>
<div class="footer">
<a href="https://www.csdn.net/">經典</a>
<a href="https://www.csdn.net/">熱門</a>
<a href="https://www.csdn.net/">推薦</a>
</div>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/category.vue'
export default {
name: 'App',
components: {
Category
},
data(){
return{
//cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
games:['4399','斗地主','王者榮耀','和平精英'],
//films:['《你好，李煥英》','《夏洛特煩擾》','《你的名字》','《蜘蛛俠》']
}
}
}
</script>
<style scoped>
.footer a {
@apply ml-10;
}
.container {
background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
@apply h-200 bg-auto bg-cover bg-contain;
}
</style>
<!-- category 組件子-->
<template>
<div>
<h3>{{ title }}分類</h3>
<!-- 定義一個插槽，等着組件的使用者(<Category>填充內容</Category>)進行填充 -->
<slot name="center">這里可以填寫默認值，當組件使用者沒有進行填充時，center會顯示</slot>
<slot name="foot">這里可以填寫默認值，當組件使用者沒有進行填充時，foot會顯示</slot>
</div>
</template>
<script>
export default {
name:'Category',
//props接收傳過來的數據
props:['listData','title']
}
</script>
<style scoped>
div{
@apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
@apply text-center bg-yellow-600 text-xl;
}
</style>
作用域插槽
<!--App.vue 父組件-->
<template>
<div class="container flex flex-row justify-center">
<!--將title和listData數據傳給子組件,下面展示了兩種使用組件方式-->
<Category title="動漫" :listData="cartoons">
<!--使用具名插槽，需要用template標簽包裹着，並使用v-slot:name -->
<template v-slot:default="obj">
<ul>
<li v-for="(g, index) in obj.cartoons" :key="index">{{ g }}</li>
</ul>
</template>
</Category>
<Category title="游戲">
<!-- 默認插槽的 slot 簡便寫法 -->
<template v-slot="obj">
<ol>
<li v-for="(g, index) in obj.games" :key="index">{{ g }}</li>
</ol>
<ul>
<li v-for="(g, index) in obj.msg" :key="index">🐱🐉插槽{{ g }}</li>
</ul>
</template>
</Category>
<Category title="電影">
<!-- 解構插槽 -->
<template v-slot="{ films, msg }">
<div>
<h4 v-for="(g, index) in films" :key="index">{{ g }}</h4>
<h3 v-for="(g, index) in msg" :key="index">🐱🐉插槽{{ g }}</h3>
</div>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/category.vue'
export default {
name: 'App',
components: {
Category
},
data(){
return{
//cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
//games:['4399','斗地主','王者榮耀','和平精英'],
//films:['《你好，李煥英》','《夏洛特煩擾》','《你的名字》','《蜘蛛俠》']
}
}
}
</script>
<style scoped>
.footer a {
@apply ml-10;
}
.container {
background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
@apply h-200 bg-auto bg-cover bg-contain;
}
</style>
<!-- category 組件子-->
<template>
<div>
<h3>{{ title }}分類</h3>
<!-- 定義一個插槽，等着組件的使用者(<Category>填充內容</Category>)進行填充 -->
<slot :cartoons="cartoons">默認插槽</slot>
<slot :games="games">默認插槽</slot>
<slot :films="films">默認插槽</slot>
<slot :msg="msg"></slot>
</div>
</template>
<script>
export default {
name:'Category',
//props接收傳過來的數據
props: ["listData", "title"],
data(){
return{
cartoons: ["海賊王", "名偵探柯南", "一人之下", "未聞花名"],
games: ["4399", "斗地主", "王者榮耀", "和平精英"],
films: [
"《你好，李煥英》",
"《夏洛特煩擾》",
"《你的名字》",
"《蜘蛛俠》",
],
msg: ["，👀作用域", "芭比"],
}
}
}
</script>
<style scoped>
div{
@apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
@apply text-center bg-yellow-600 text-xl;
}
</style>
動態插槽名
<!--App.vue 父組件-->
<template>
<div class="container flex flex-col justify-center items-center">
<Category title="游戲">
<!-- v-slot: 縮寫法 # -->
<template #[dynamicSlotName]="obj">
<ol>
<li v-for="(g, index) in obj.games" :key="index">{{ g }}</li>
</ol>
</template>
</Category>
<button @click="change">點這切換</button>
</div>
</template>
<script>
import Category from "./components/category.vue";
export default {
name: "App",
components: {
Category,
},
data() {
return {
dynamicSlotName: "1",
};
},
methods: {
change() {
if (this.dynamicSlotName == "1") {
this.dynamicSlotName = "2";
} else this.dynamicSlotName = "1";
},
},
};
</script>
<style scoped>
.footer a {
@apply ml-10;
}
.container {
background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
@apply h-200 bg-auto bg-cover bg-contain;
}
button {
@apply rounded-lg p-2 w-30 cursor-pointer bg-gradient-to-r from-violet-500 to-fuchsia-500 hover:from-violet-700 text-white shadow-lg shadow-indigo-700/80 text-center;
border: none;
}
</style>
<!-- category 組件子-->
<template>
<div>
<h3>{{ title }}分類</h3>
<!-- 具名+作用域 插槽 -->
<!--兩個插槽，傳遞的數據不一樣。-->
<slot name="1" :games="games1"></slot>
<slot name="2" :games="games2"></slot>
</div>
</template>
<script>
export default {
name:'Category',
//props接收傳過來的數據
props: ["listData", "title"],
data(){
return{
games1:['4399','斗地主','王者榮耀','和平精英'],
games2:['我的世界','cf','LOL','cs']
}
}
}
</script>
<style scoped>
div{
@apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
@apply text-center bg-yellow-600 text-xl;
}
</style>
和具名插槽的縮寫
跟
v-on和v-bind一樣，v-slot也有縮寫，即把參數之前的所有內容(v-slot:)替換為字符#
<template #center>
</template>
完整代碼
推薦一個加速軟件——DivSidecar
意為為開發者打輔助的邊車工具，通過本地代理的方式將https請求代理到一些國內的加速通道上
1、GitHub打不開，加速Github 很有用。
2、dns優選（解決污染問題）
3、Stack Overflow 加速
4、npm加速