閱讀本文約需要5分鐘

大家好，我是你們的導(dǎo)師，我每天都會(huì)在這里給大家分享一些干貨內(nèi)容(當(dāng)然了，周末也要允許老師休息一下哈)。上次老師跟大家分享了下前端幾種高級(jí)布局的方式的相關(guān)知識(shí)，今天跟大家分享Vue 插槽詳解的知識(shí)。參考來(lái)源：https://www.cnblogs.com/chinabin1993/p/9115396.html

Vue插槽，是學(xué)習(xí)vue中必不可少的一節(jié)，當(dāng)初剛接觸vue的時(shí)候，對(duì)這些掌握的一知半解，特別是作用域插槽一直沒(méi)明白。

后面越來(lái)越發(fā)現(xiàn)插槽的好用。

分享一下插槽的一些知識(shí)吧。

分以下幾點(diǎn)：

1、插槽內(nèi)可以放置什么內(nèi)容？

2、默認(rèn)插槽

3、具名插槽

4、作用域插槽?

一、插槽內(nèi)容

一句話：插槽內(nèi)可以是任意內(nèi)容。

先看一下下面的代碼：聲明一個(gè)child-component組件，

如果現(xiàn)在我想在內(nèi)放置一些內(nèi)容，結(jié)果會(huì)是怎樣？

<div id="app"> <child-component>child-component>div><script> Vue.component('child-component',{ template:` Hello,World! ` }) let vm = new Vue({ el:'#app', data:{ } })script>　　<child-component>你好child-component>輸出內(nèi)容還是在組件中的內(nèi)容，在 內(nèi)寫(xiě)的內(nèi)容沒(méi)起作用。

這就是插槽出現(xiàn)的作用。

我們現(xiàn)在給組件增加一個(gè)插槽

我們?cè)趦?nèi)寫(xiě)的"你好"起作用了！！！

Vue.component('child-component',{ template:` <div> Hello,World! <slot>slot> div> ` })?

到現(xiàn)在，我們知道了什么是插槽：?

插槽就是Vue實(shí)現(xiàn)的一套內(nèi)容分發(fā)的API，將元素作為承載分發(fā)內(nèi)容的出口。

這句話的意思就是，沒(méi)有插槽的情況下在組件標(biāo)簽內(nèi)些一些內(nèi)容是不起任何作用的，當(dāng)我在組件中聲明了slot元素后，在組件元素內(nèi)寫(xiě)的內(nèi)容

就會(huì)跑到它這里了！

二、具名插槽

具名插槽，就是給這個(gè)插槽起個(gè)名字

在組件中，我給插槽起個(gè)名字，一個(gè)名字叫"girl"，一個(gè)名字叫"boy"，還有一個(gè)不起名字。

然后再內(nèi)，slot屬性對(duì)應(yīng)的內(nèi)容都會(huì)和組件中name一一對(duì)應(yīng)。

而沒(méi)有名字的，就是默認(rèn)插槽！！

<div id="app"> <child-component> <template slot="girl"> 漂亮、美麗、購(gòu)物、逛街 template> <template slot="boy"> 帥氣、才實(shí) template> <div> 我是一類人， 我是默認(rèn)的插槽 div> child-component>div><script> Vue.component('child-component',{ template:` <div> <h4>這個(gè)世界不僅有男人和女人h4> <slot name="girl">slot> <div style="height:1px;background-color:red;">div> <slot name="boy">slot> <div style="height:1px;background-color:red;">div> <slot>slot> div> ` }) let vm = new Vue({ el:'#app', data:{ } })script>

三、默認(rèn)插槽

上面已經(jīng)介紹過(guò)了，這里不做描述

四、作用域插槽

之前一直沒(méi)搞懂作用域插槽到底是什么！！！

說(shuō)白了就是我在組件上的屬性，可以在組件元素內(nèi)使用！?

先看一個(gè)最簡(jiǎn)單的例子！！

我們給元素上定義一個(gè)屬性say(隨便定義的！)，接下來(lái)在使用組件child，然后在template元素上添加屬性slot-scope！！隨便起個(gè)名字a

我們把a(bǔ)打印一下發(fā)現(xiàn)是 {"say" : "你好"}，也就是slot上面的屬性和值組成的鍵值對(duì)！！！

這就是作用域插槽！

我可以把組件上的屬性/值，在組件元素上使用！！

<div id="app"> <child> <template slot-scope="a">　　　　　　 {{a}} template> child>div><script> Vue.component('child',{ template:` ` }) let vm = new Vue({ el:'#app', data:{ } })script>?

再看一下下面的例子：

<div id="app"> <child :lists="nameList"> <template slot-scope="a"> {{a}} template> child>div><script> Vue.component('child',{ props:['lists'], template:` ` }) let vm = new Vue({ el:'#app', data:{ nameList:[ {id:1,name:'孫悟空'}, {id:2,name:'豬八戒'}, {id:3,name:'沙和尚'}, {id:4,name:'唐僧'}, {id:5,name:'小白龍'}, ] } })script>

看一下輸出結(jié)果

這太有用了兄弟們！！！

這樣我就可以在這元素上隨便玩了啊！！

當(dāng)id等于1的時(shí)候，我前面加個(gè)你好。

我可以隨便根據(jù)這個(gè)對(duì)象的屬性值進(jìn)行操作！

<child :lists="nameList"> <template slot-scope="a"> <div v-if='a.bbbbb.id==1'>你好：<span>{{a.bbbbb.name}}span>div> <div v-else>{{a.bbbbb.name}}div> template> child>

最后！如果用過(guò)elementui的同學(xué)，一定知道表格就是這樣來(lái)的！！

表格的本質(zhì)就是這樣！

如果你的才華還實(shí)現(xiàn)不了你的野心，那就靜下心來(lái)，埋頭苦干。有志者事竟成破釜成舟百二秦關(guān)終屬楚，苦心人天不負(fù)臥薪嘗膽三千越甲可吞吳！

今天就分享這么多，關(guān)于Vue 插槽詳解，你學(xué)會(huì)了多少？歡迎在留言區(qū)評(píng)論，對(duì)于有價(jià)值的留言，我們都會(huì)一一回復(fù)的。如果覺(jué)得文章對(duì)你有一丟丟幫助，請(qǐng)點(diǎn)右下角【在看】，讓更多人看到該文章。如果有想了解的，也可以進(jìn)行留言

總結(jié)

以上是生活随笔為你收集整理的vue + element-ui 聊天_Vue 插槽详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。