Vue 組件復(fù)用多次自定義參數(shù)操作

更新時(shí)間：2020年07月27日 09:58:41 作者：小茄子Seven

這篇文章主要介紹了Vue 組件復(fù)用多次自定義參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

場(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ò)寫多個(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)單，就是一開始沒(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)行控制

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

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

（2）具名插槽

（3）作用域插槽

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

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

出現(xiàn)緣由：

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

備用內(nèi)容在子組件的作用域內(nèi)編譯，并且只有在宿主元素為空，且沒(méi)有要插入的內(nèi)容時(shí)才顯示備用內(nè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)寫一些內(nèi)容是不起任何作用的，當(dāng)在組件中聲明了插槽元素后，在組件元素內(nèi)寫的內(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版本新增，是一種特殊類型的插槽，用作一個(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ǔ)法，開始使用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",
 })

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

在編寫組件時(shí)，最好考慮好以后是否要進(jìn)行復(fù)用。一次性組件間有緊密的耦合沒(méi)關(guān)系，但是可復(fù)用組件應(yīng)當(dāng)定義一個(gè)清晰的公開接口，同時(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: