Vue 組件復用多次自定義參數(shù)操作
場景：
當項目中多處出現(xiàn)相同的模塊時，此時的正常考慮是將其做成公共組建，通過傳參不同，實現(xiàn)多處復用
具體：
背景：項目使用的技術是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進來，代碼如下：
<template>
<vSelect :options="options" @my-event="select"></vSelect>
</template>
<script>
import vSelect from '文件路徑'
export default {
data() {
return {
options: [
{
value:0,
label:'選項一'
},
{
value:1,
label:'選項二'
},
],
}
},
components: {
vSelect
},
methods: {
select(value) {
console.log(value)
}
},
}
</script>
以上的話便可以實現(xiàn)一個組件的簡單調用，選擇后的值會從子組件傳到父組件
問題：
多處使用同一個組件時，會代表不同的選項，拿到的值也需要做不同的處理，正常也可以通過寫多個方法來實現(xiàn)對取得的值的不同處理，但是這種方法不夠靈活。
解決：
此時自然而然想到的一種解決方法就是給上面的select函數(shù)再增加一個參數(shù)，根據(jù)參數(shù)不同進行不同的處理
但是真正實施起來卻發(fā)現(xiàn)會出現(xiàn)很多問題。
其實解決方法很簡單，就是一開始沒轉過來彎，還是花了一些時間，最終的解決方案就是使用回調函數(shù)：
<vSelect :options="options" @my-event="val=>select(val,param)"></vSelect>
select(value,param) {
console.log(value,param)
}
回過頭來看，真的覺的這個壓根都不能算作一個問題，就當記錄一下作為Vue組件使用的初級教程吧，希望能夠幫助到一些人。
補充知識：VUE之組件（插槽slot與可復用組件）
插槽slot
當子組件部分內容是通過父組件傳遞DOM進行顯示時，可以不用父組件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內容，所以稱之為插槽。
小結：
1、插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性；
2、插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制
插槽分類有很多種，本節(jié)將一一介紹
（1）單個插槽/默認插槽
（2）具名插槽
（3）作用域插槽
（4）解構插槽
插槽分類一：單個插槽(備胎插槽)
出現(xiàn)緣由：
最初在 標簽中的任何內容都被視為備用內容。
備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。
插槽分類一：單個插槽(備胎)
（1）宿主元素不為空時，顯示宿主元素里內容，不顯示備用內容
<!-- html代碼 -->
<div id="app">
<my-blog></my-blog>
</div>
// vue代碼
Vue.component('my-blog',{
template:`
<div>
<slot>備用內容</slot>
<span>惡毒的皇后</span>
</div>`
})
var app=new Vue({
el:"#app",
})
注意：此時上面沒有內容的情況下會自動填上默認的內容
官方文檔描述：
Vue 實現(xiàn)了一套內容分發(fā)的 API，將 元素作為承載分發(fā)內容的出口
插槽內可以包含任何模板代碼，包括 HTML模板代碼，甚至可以是其它的組件。
通俗理解：
沒有插槽的情況下在組件標簽內寫一些內容是不起任何作用的，當在組件中聲明了插槽元素后，在組件元素內寫的內容就會跑到它這里了，即插槽此時充當承載分發(fā)內容的出口！
具名插槽
首先看個案例，結合案例了解下具名插槽的概念
（1）在子組件中定義了三個slot標簽，其中有兩個分別添加了name屬性header和footer。即通過給slot添加name屬性，來指定當前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",
})
具名插槽小結
（1）具名插槽其實就是在父組件中添加一個 slot=‘自定義名字' 的屬性，然后在子組件中的 里面添加 name=‘自定義名字' 即可
（2）如果父組件中有一部分沒有添加 slot 屬性，則此處就是默認的插槽，在子組件中的 直接就是使用的父組件的默認插槽部分
（3）如果沒有默認插槽，這些找不到匹配的內容片段將被拋棄。
作用域插槽slot
簡介：
作用域插槽為Vue2.1.0版本新增，是一種特殊類型的插槽，用作一個 (能被傳遞數(shù)據(jù)的) 可重用模板，來代替已經渲染好的元素。
父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。
不過，我們可以在父組件中使用 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子組件可能在很多地方調用，希望在不同地方調用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: ["汪汪隊","彩虹寶寶","天線寶寶","蘇菲亞","大頭兒子小頭爸爸","熊出沒"]
}
}
})
var app = new Vue({
el: "#app",
})
條件判斷渲染
到目前為止，便可以在元素上隨便操作了
例如：當名字長度等于3的時候，在前面加個“你好”標志
代碼如下
<!-- 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: ["汪汪隊","彩虹寶寶","天線寶寶","蘇菲亞","大頭兒子小頭爸爸","熊出沒"]
}
}
})
var app = new Vue({
el: "#app",
})
作用域插槽slot-scrop新語法
版本：自 2.6.0 起有所更新，已廢棄使用 slot-scope 語法，開始使用v-slot進行替代，如下所示
<!-- 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>
解構插槽：
v-slot 的值實際上可以是任何能夠作為函數(shù)定義中的參數(shù)的 JS表達式。所以在支持的環(huán)境下 (單文件組件或現(xiàn)代瀏覽器)，你也可以使用 ES2015 解構來傳入具體的插槽 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: ["汪汪隊","彩虹寶寶","天線寶寶","蘇菲亞","大頭兒子小頭爸爸","熊出沒"]
}
}
})
var app = new Vue({
el: "#app",
})
作用域插槽slot-scrop新語法
你甚至可以定義后備內容，用于插槽 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: ["汪汪隊","彩虹寶寶","天線寶寶","蘇菲亞",undefined,"熊出沒"]
}
}
})
var app = new Vue({
el: "#app",
})
編寫可復用組件注意事項：
在編寫組件時，最好考慮好以后是否要進行復用。一次性組件間有緊密的耦合沒關系，但是可復用組件應當定義一個清晰的公開接口，同時也不要對其使用的外層數(shù)據(jù)作出任何假設。
Vue 組件的 API 來自三部分——prop、事件和插槽：
1、Prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；
2、事件允許從組件內觸發(fā)外部環(huán)境的副作用；
3、插槽允許外部環(huán)境將額外的內容組合在組件中。
以上這篇Vue 組件復用多次自定義參數(shù)操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項目、引入?bimface?響應的文件、修改?App.vue?文件，實現(xiàn)頁面渲染等步驟，需要的小伙伴可以參考一下2021-12-12
Vue數(shù)組響應式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應式操作及高階函數(shù)使用代碼詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目打包后打開空白解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue 實現(xiàn)可視化拖拽頁面編輯器的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了Vue3在Setup中使用axios請求獲取的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue 中的受控與非受控組件的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
由于某些限制，vue2不能檢測到某些情況下數(shù)組的變動，本文就將具體講解這兩種限制的解決思路2021-06-06
本文主要介紹了element?tooltip的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09