場景：

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

具體：

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

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

<!--組件文件 比如說這個組件叫 vSelect 下面會用--><template> <el-select @change='handleChange' v-model='value' :placeholder='請選擇'> <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>

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

<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)一個組件的簡單調(diào)用，選擇后的值會從子組件傳到父組件

問題：

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

解決：

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

但是真正實(shí)施起來卻發(fā)現(xiàn)會出現(xiàn)很多問題。

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

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

回過頭來看，真的覺的這個壓根都不能算作一個問題，就當(dāng)記錄一下作為Vue組件使用的初級教程吧，希望能夠幫助到一些人。

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

插槽slot

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

廢話不多說看代碼：

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

命名由來：

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

小結(jié)：

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

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

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

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

（2）具名插槽

（3）作用域插槽

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

插槽分類一：單個插槽(備胎插槽)

出現(xiàn)緣由：

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

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

插槽分類一：單個插槽(備胎)

（1）宿主元素不為空時，顯示宿主元素里內(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', })

注意：此時上面沒有內(nèi)容的情況下會自動填上默認(rèn)的內(nèi)容

官方文檔描述：

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

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

通俗理解：

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

具名插槽

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

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

<!-- html代碼 --> <div id='app'> <my-blog> <h2 slot='header'>格林童話</h2> <cite>格林兄弟</cite> <p slot='footer'>白雪公主和七個小矮人</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í)就是在父組件中添加一個 slot=‘自定義名字’ 的屬性，然后在子組件中的 里面添加 name=‘自定義名字’ 即可

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

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

作用域插槽slot

簡介：

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

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

不過，我們可以在父組件中使用 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）在父級中，具有特殊特性 slot-scope 的 元素必須存在，表示它是作用域插槽的模板(在 2.5.0+，slot-scope 能被用在任意元素或組件中而不再局限于 )。

（2）slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象

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

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

但是：注意這里要求列表的循環(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ì)','彩虹寶寶','天線寶寶','蘇菲亞','大頭兒子小頭爸爸','熊出沒'] } } }) var app = new Vue({ el: '#app', })

條件判斷渲染

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

例如：當(dāng)名字長度等于3的時候，在前面加個“你好”標(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ì)','彩虹寶寶','天線寶寶','蘇菲亞','大頭兒子小頭爸爸','熊出沒'] } } }) var app = new Vue({ el: '#app', })

作用域插槽slot-scrop新語法

版本：自 2.6.0 起有所更新，已廢棄使用 slot-scope 語法，開始使用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)來傳入具體的插槽 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ì)','彩虹寶寶','天線寶寶','蘇菲亞','大頭兒子小頭爸爸','熊出沒'] } } }) var app = new Vue({ el: '#app', })

作用域插槽slot-scrop新語法

你甚至可以定義后備內(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,'熊出沒'] } } }) var app = new Vue({ el: '#app', })

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

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

Vue 組件的 API 來自三部分——prop、事件和插槽：

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

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

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

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