溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何實(shí)現(xiàn)Vue組件復(fù)用多次自定義參數(shù)

發(fā)布時間：2020-07-27 13:47:28 來源：億速云 閱讀：1412 作者：小豬 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了如何實(shí)現(xiàn)Vue組件復(fù)用多次自定義參數(shù)，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

場景：

當(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>
  <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內(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>
  <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",
 })

具名插槽小結(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">
   <h2>{{props.data}}</h2>
  </template>
  </my-blog>
  <my-blog>
  <template slot-scope="props">
   <h5>{{props.data}}</h5>
  </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">
   <h2 v-if="props.data.length==3">新推薦--{{props.data}}</h2>
   <h2 v-else>{{props.data}}</h2>
  </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">
   <h2 v-if="props.data.length==3">新推薦--{{props.data}}</h2>
   <h2 v-else>{{props.data}}</h2>
  </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}">
   <h2 v-if="data.length==3">新推薦--{{data}}</h2>
   <h2 v-else>{{data}}</h2>
  </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='這部電視禁播了'}">
   <h2 v-if="data.length==3">新推薦--{{data}}</h2>
   <h2 v-else>{{data}}</h2>
  </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)容組合在組件中。

以上就是關(guān)于如何實(shí)現(xiàn)Vue組件復(fù)用多次自定義參數(shù)的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手