場(chǎng)景：

當(dāng)項(xiàng)目中多處出現(xiàn)相同的模塊時(shí)，此時(shí)的正常考慮是將其做成公共組建，通過(guò)傳參不同，實(shí)現(xiàn)多處復(fù)用

具體：

背景：項(xiàng)目使用的技術(shù)是VUE+ElementUI

此處，多處出現(xiàn)的模塊是select選擇框，封裝成組件后，傳給它option的值，代碼如下：

<!--組件文件 比如說(shuō)這個(gè)組件叫 vSelect 下面會(huì)用--><template> <el-select @change='handleChange' v-model='value' :placeholder='請(qǐng)選擇'> <el-option v-for='(item,index) in options' :key='index' :label='item.label' :value='item.value'> </el-option> </el-select></template><script> export default { data() { return { value: ’’, } }, props:[’options’], methods: { handleChange(value) { this.$emit(’my-event’,value); } }, }</script>

使用時(shí)只需把文件import進(jìn)來(lái)，代碼如下：

<template> <vSelect :options='options' @my-event='select'></vSelect></template><script> import vSelect from ’文件路徑’ export default { data() { return {options: [ { value:0, label:’選項(xiàng)一’ }, { value:1, label:’選項(xiàng)二’ },], } }, components: { vSelect }, methods: { select(value) {console.log(value) } }, }</script>

以上的話便可以實(shí)現(xiàn)一個(gè)組件的簡(jiǎn)單調(diào)用，選擇后的值會(huì)從子組件傳到父組件

問(wèn)題：

多處使用同一個(gè)組件時(shí)，會(huì)代表不同的選項(xiàng)，拿到的值也需要做不同的處理，正常也可以通過(guò)寫(xiě)多個(gè)方法來(lái)實(shí)現(xiàn)對(duì)取得的值的不同處理，但是這種方法不夠靈活。

解決：

此時(shí)自然而然想到的一種解決方法就是給上面的select函數(shù)再增加一個(gè)參數(shù)，根據(jù)參數(shù)不同進(jìn)行不同的處理

但是真正實(shí)施起來(lái)卻發(fā)現(xiàn)會(huì)出現(xiàn)很多問(wèn)題。

其實(shí)解決方法很簡(jiǎn)單，就是一開(kāi)始沒(méi)轉(zhuǎn)過(guò)來(lái)彎，還是花了一些時(shí)間，最終的解決方案就是使用回調(diào)函數(shù)：

<vSelect :options='options' @my-event='val=>select(val,param)'></vSelect>select(value,param) { console.log(value,param)}

回過(guò)頭來(lái)看，真的覺(jué)的這個(gè)壓根都不能算作一個(gè)問(wèn)題，就當(dāng)記錄一下作為Vue組件使用的初級(jí)教程吧，希望能夠幫助到一些人。

補(bǔ)充知識(shí)：VUE之組件（插槽slot與可復(fù)用組件）

插槽slot

當(dāng)子組件部分內(nèi)容是通過(guò)父組件傳遞DOM進(jìn)行顯示時(shí)，可以不用父組件props傳值的比較挫的語(yǔ)法，Vue中提供了一種新型語(yǔ)法：插槽slot。

廢話不多說(shuō)看代碼：

<!-- html代碼 --> <div id='app'> <my-blog> <h2>格林童話</h2> <cite>格林兄弟</cite> <p>白雪公主和七個(gè)小矮人</p> </my-blog> </div>// vue代碼 Vue.component(’my-blog’,{ template:` <div> <slot></slot> <span>惡毒的皇后</span> </div>` }) var app=new Vue({ el:'#app', })

命名由來(lái)：

這種語(yǔ)法看起來(lái)像是用子組件直接往里直接插DOM內(nèi)容，所以稱之為插槽。

小結(jié)：

1、插槽（Slot）是Vue提出來(lái)的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性；

2、插槽顯不顯示、怎樣顯示是由父組件來(lái)控制的，而插槽在哪里顯示就由子組件來(lái)進(jìn)行控制

插槽分類(lèi)有很多種，本節(jié)將一一介紹

（1）單個(gè)插槽/默認(rèn)插槽

（2）具名插槽

（3）作用域插槽

（4）解構(gòu)插槽

插槽分類(lèi)一：?jiǎn)蝹€(gè)插槽(備胎插槽)

出現(xiàn)緣由：

最初在 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容。

備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒(méi)有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容。

插槽分類(lèi)一：?jiǎn)蝹€(gè)插槽(備胎)

（1）宿主元素不為空時(shí)，顯示宿主元素里內(nèi)容，不顯示備用內(nèi)容

<!-- html代碼 --> <div id='app'> <my-blog></my-blog> </div>// vue代碼 Vue.component(’my-blog’,{ template:` <div> <slot>備用內(nèi)容</slot> <span>惡毒的皇后</span> </div>` }) var app=new Vue({ el:'#app', })

注意：此時(shí)上面沒(méi)有內(nèi)容的情況下會(huì)自動(dòng)填上默認(rèn)的內(nèi)容

官方文檔描述：

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

插槽內(nèi)可以包含任何模板代碼，包括 HTML模板代碼，甚至可以是其它的組件。

通俗理解：

沒(méi)有插槽的情況下在組件標(biāo)簽內(nèi)寫(xiě)一些內(nèi)容是不起任何作用的，當(dāng)在組件中聲明了插槽元素后，在組件元素內(nèi)寫(xiě)的內(nèi)容就會(huì)跑到它這里了，即插槽此時(shí)充當(dāng)承載分發(fā)內(nèi)容的出口！

具名插槽

首先看個(gè)案例，結(jié)合案例了解下具名插槽的概念

（1）在子組件中定義了三個(gè)slot標(biāo)簽，其中有兩個(gè)分別添加了name屬性header和footer。即通過(guò)給slot添加name屬性，來(lái)指定當(dāng)前slot的名字

<!-- html代碼 --> <div id='app'> <my-blog> <h2 slot='header'>格林童話</h2> <cite>格林兄弟</cite> <p slot='footer'>白雪公主和七個(gè)小矮人</p> </my-blog> </div>// vue代碼 Vue.component(’my-blog’,{ template:` <div> <slot name='header'></slot> <span>惡毒的皇后</span> <slot></slot> <slot name='footer'></slot> </div>` }) var app=new Vue({ el:'#app', })

具名插槽小結(jié)

（1）具名插槽其實(shí)就是在父組件中添加一個(gè) slot=‘自定義名字’ 的屬性，然后在子組件中的 里面添加 name=‘自定義名字’ 即可

（2）如果父組件中有一部分沒(méi)有添加 slot 屬性，則此處就是默認(rèn)的插槽，在子組件中的 直接就是使用的父組件的默認(rèn)插槽部分

（3）如果沒(méi)有默認(rèn)插槽，這些找不到匹配的內(nèi)容片段將被拋棄。

作用域插槽slot

簡(jiǎn)介：

作用域插槽為Vue2.1.0版本新增，是一種特殊類(lèi)型的插槽，用作一個(gè) (能被傳遞數(shù)據(jù)的) 可重用模板，來(lái)代替已經(jīng)渲染好的元素。

父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。

不過(guò)，我們可以在父組件中使用 slot-scope 特性從子組件獲取數(shù)據(jù)。前提是需要在子組件中使用 :data=data 先傳遞 data 的數(shù)據(jù)。

作用域插槽案例：

<!-- html代碼 --> <div id='app'> <!-- 利用solt-scope獲取數(shù)據(jù) --> <my-blog> <template slot-scope='props'> {{props.data}} </template> </my-blog> </div> // vue代碼 // 1.子組件傳遞數(shù)據(jù) Vue.component(’my-blog’, { template: `<div> <slot :data='text'></slot> </div>`, data() { return { text: ’喜歡福安’ } } }) var app = new Vue({ el: '#app', })

注意：

（1）在父級(jí)中，具有特殊特性 slot-scope 的 元素必須存在，表示它是作用域插槽的模板(在 2.5.0+，slot-scope 能被用在任意元素或組件中而不再局限于 )。

（2）slot-scope 的值將被用作一個(gè)臨時(shí)變量名，此變量接收從子組件傳遞過(guò)來(lái)的 prop 對(duì)象

（3）在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像你將 prop 傳遞給組件一樣，接下來(lái)父組件中使用 slot-scope 特性從子組件獲取數(shù)據(jù)

案例：blog子組件可能在很多地方調(diào)用，希望在不同地方調(diào)用blog組件時(shí)

但是：注意這里要求列表的循環(huán)和樣式不是由子組件決定，而是外部決定的，修改代碼如下

<!-- html代碼 --> <div id='app'> <!-- 利用solt-scope獲取數(shù)據(jù) --> <my-blog> <template slot-scope='props'> <h1>{{props.data}}</h1> </template> </my-blog> <my-blog> <template slot-scope='props'> <h4>{{props.data}}</h4> </template> </my-blog> </div>// vue代碼 // 1.子組件傳遞數(shù)據(jù) Vue.component(’my-blog’, { template: ` <div> <ul> <li v-for='text of texts'> <slot :data='text'></slot> </li> </ul> </div>`, data() { return { texts: ['汪汪隊(duì)','彩虹寶寶','天線寶寶','蘇菲亞','大頭兒子小頭爸爸','熊出沒(méi)'] } } }) var app = new Vue({ el: '#app', })

條件判斷渲染

到目前為止，便可以在元素上隨便操作了

例如：當(dāng)名字長(zhǎng)度等于3的時(shí)候，在前面加個(gè)“你好”標(biāo)志

代碼如下

<!-- html代碼 --> <div id='app'> <!-- 利用solt-scope獲取數(shù)據(jù) --> <my-blog> <template slot-scope='props'> <h1 v-if='props.data.length==3'>新推薦--{{props.data}}</h1> <h1 v-else>{{props.data}}</h1> </template> </my-blog> </div> // vue代碼 // 1.子組件傳遞數(shù)據(jù) Vue.component(’my-blog’, { template: ` <div> <ul> <li v-for='text of texts'> <slot :data='text'></slot> </li> </ul> </div>`, data() { return { texts: ['汪汪隊(duì)','彩虹寶寶','天線寶寶','蘇菲亞','大頭兒子小頭爸爸','熊出沒(méi)'] } } }) var app = new Vue({ el: '#app', })

作用域插槽slot-scrop新語(yǔ)法

版本：自 2.6.0 起有所更新，已廢棄使用 slot-scope 語(yǔ)法，開(kāi)始使用v-slot進(jìn)行替代，如下所示

<!-- html代碼 --> <div id='app'> <!-- 利用solt-scope獲取數(shù)據(jù) --> <my-blog> <template v-slot='props'> <h1 v-if='props.data.length==3'>新推薦--{{props.data}}</h1> <h1 v-else>{{props.data}}</h1> </template> </my-blog> </div>

解構(gòu)插槽：

v-slot 的值實(shí)際上可以是任何能夠作為函數(shù)定義中的參數(shù)的 JS表達(dá)式。所以在支持的環(huán)境下 (單文件組件或現(xiàn)代瀏覽器)，你也可以使用 ES2015 解構(gòu)來(lái)傳入具體的插槽 prop，如下：

<!-- html代碼 --> <div id='app'> <!-- 利用solt-scope獲取數(shù)據(jù) --> <my-blog> <template v-slot='{data}'> <h1 v-if='data.length==3'>新推薦--{{data}}</h1> <h1 v-else>{{data}}</h1> </template> </my-blog> </div>// vue代碼 // 1.子組件傳遞數(shù)據(jù) Vue.component(’my-blog’, { template: ` <div> <ul> <li v-for='text of texts'> <slot :data='text'></slot> </li> </ul> </div>`, data() { return { texts: ['汪汪隊(duì)','彩虹寶寶','天線寶寶','蘇菲亞','大頭兒子小頭爸爸','熊出沒(méi)'] } } }) var app = new Vue({ el: '#app', })

作用域插槽slot-scrop新語(yǔ)法

你甚至可以定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形

<!-- html代碼 --> <div id='app'> <!-- 利用solt-scope獲取數(shù)據(jù) --> <my-blog> <template v-slot='{data=’這部電視禁播了’}'> <h1 v-if='data.length==3'>新推薦--{{data}}</h1> <h1 v-else>{{data}}</h1> </template> </my-blog> </div>// vue代碼 // 1.子組件傳遞數(shù)據(jù) Vue.component(’my-blog’, { template: ` <div> <ul> <li v-for='text of texts'> <slot :data='text'></slot> </li> </ul> </div>`, data() { return { texts: ['汪汪隊(duì)','彩虹寶寶','天線寶寶','蘇菲亞',undefined,'熊出沒(méi)'] } } }) var app = new Vue({ el: '#app', })

編寫(xiě)可復(fù)用組件注意事項(xiàng)：

在編寫(xiě)組件時(shí)，最好考慮好以后是否要進(jìn)行復(fù)用。一次性組件間有緊密的耦合沒(méi)關(guān)系，但是可復(fù)用組件應(yīng)當(dāng)定義一個(gè)清晰的公開(kāi)接口，同時(shí)也不要對(duì)其使用的外層數(shù)據(jù)作出任何假設(shè)。

Vue 組件的 API 來(lái)自三部分——prop、事件和插槽：

1、Prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；

2、事件允許從組件內(nèi)觸發(fā)外部環(huán)境的副作用；

3、插槽允許外部環(huán)境將額外的內(nèi)容組合在組件中。

以上這篇Vue 組件復(fù)用多次自定義參數(shù)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。