溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了如何實現Vue組件復用多次自定義參數，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
場景：
當項目中多處出現相同的模塊時，此時的正常考慮是將其做成公共組建，通過傳參不同，實現多處復用
具體：
背景：項目使用的技術是VUE+ElementUI
此處，多處出現的模塊是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>以上的話便可以實現一個組件的簡單調用，選擇后的值會從子組件傳到父組件
問題：
多處使用同一個組件時，會代表不同的選項，拿到的值也需要做不同的處理，正常也可以通過寫多個方法來實現對取得的值的不同處理，但是這種方法不夠靈活。
解決：
此時自然而然想到的一種解決方法就是給上面的select函數再增加一個參數，根據參數不同進行不同的處理
但是真正實施起來卻發現會出現很多問題。
其實解決方法很簡單，就是一開始沒轉過來彎，還是花了一些時間，最終的解決方案就是使用回調函數：
<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>
<h3>格林童話</h3>
<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、插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制
插槽分類有很多種，本節將一一介紹
（1）單個插槽/默認插槽
（2）具名插槽
（3）作用域插槽
（4）解構插槽
插槽分類一：單個插槽(備胎插槽)
出現緣由：
最初在 標簽中的任何內容都被視為備用內容。
備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。
插槽分類一：單個插槽(備胎)
（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 實現了一套內容分發的 API，將 元素作為承載分發內容的出口
插槽內可以包含任何模板代碼，包括 HTML模板代碼，甚至可以是其它的組件。
通俗理解：
沒有插槽的情況下在組件標簽內寫一些內容是不起任何作用的，當在組件中聲明了插槽元素后，在組件元素內寫的內容就會跑到它這里了，即插槽此時充當承載分發內容的出口！
具名插槽
首先看個案例，結合案例了解下具名插槽的概念
（1）在子組件中定義了三個slot標簽，其中有兩個分別添加了name屬性header和footer。即通過給slot添加name屬性，來指定當前slot的名字
<!-- html代碼 -->
<div id="app">
<my-blog>
<h3 slot="header">格林童話</h3>
<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版本新增，是一種特殊類型的插槽，用作一個 (能被傳遞數據的) 可重用模板，來代替已經渲染好的元素。
父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。
不過，我們可以在父組件中使用 slot-scope 特性從子組件獲取數據。前提是需要在子組件中使用 :data=data 先傳遞 data 的數據。
作用域插槽案例：
<!-- html代碼 -->
<div id="app">
<!-- 利用solt-scope獲取數據 -->
<my-blog>
<template slot-scope="props">
{{props.data}}
</template>
</my-blog>
</div>
// vue代碼
// 1.子組件傳遞數據
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）在子組件中，只需將數據傳遞到插槽，就像你將 prop 傳遞給組件一樣，接下來父組件中使用 slot-scope 特性從子組件獲取數據
案例：blog子組件可能在很多地方調用，希望在不同地方調用blog組件時
但是：注意這里要求列表的循環和樣式不是由子組件決定，而是外部決定的，修改代碼如下
<!-- html代碼 -->
<div id="app">
<!-- 利用solt-scope獲取數據 -->
<my-blog>
<template slot-scope="props">
<h2>{{props.data}}</h2>
</template>
</my-blog>
<my-blog>
<template slot-scope="props">
<h5>{{props.data}}</h5>
</template>
</my-blog>
</div>
// vue代碼
// 1.子組件傳遞數據
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獲取數據 -->
<my-blog>
<template slot-scope="props">
<h2 v-if="props.data.length==3">新推薦--{{props.data}}</h2>
<h2 v-else>{{props.data}}</h2>
</template>
</my-blog>
</div>
// vue代碼
// 1.子組件傳遞數據
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獲取數據 -->
<my-blog>
<template v-slot="props">
<h2 v-if="props.data.length==3">新推薦--{{props.data}}</h2>
<h2 v-else>{{props.data}}</h2>
</template>
</my-blog>
</div>解構插槽：
v-slot 的值實際上可以是任何能夠作為函數定義中的參數的 JS表達式。所以在支持的環境下 (單文件組件或現代瀏覽器)，你也可以使用 ES2015 解構來傳入具體的插槽 prop，如下：
<!-- html代碼 -->
<div id="app">
<!-- 利用solt-scope獲取數據 -->
<my-blog>
<template v-slot="{data}">
<h2 v-if="data.length==3">新推薦--{{data}}</h2>
<h2 v-else>{{data}}</h2>
</template>
</my-blog>
</div>
// vue代碼
// 1.子組件傳遞數據
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獲取數據 -->
<my-blog>
<template v-slot="{data='這部電視禁播了'}">
<h2 v-if="data.length==3">新推薦--{{data}}</h2>
<h2 v-else>{{data}}</h2>
</template>
</my-blog>
</div>
// vue代碼
// 1.子組件傳遞數據
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",
})編寫可復用組件注意事項：
在編寫組件時，最好考慮好以后是否要進行復用。一次性組件間有緊密的耦合沒關系，但是可復用組件應當定義一個清晰的公開接口，同時也不要對其使用的外層數據作出任何假設。
Vue 組件的 API 來自三部分——prop、事件和插槽：
1、Prop 允許外部環境傳遞數據給組件；
2、事件允許從組件內觸發外部環境的副作用；
3、插槽允許外部環境將額外的內容組合在組件中。
以上就是關于如何實現Vue組件復用多次自定義參數的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
