快捷導(dǎo)航

Vue中常見(jiàn)的幾種傳參方式小結(jié)

更新時(shí)間：2023年05月05日 10:53:28 作者：星II河

Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見(jiàn)的幾種傳參方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

Vue組件傳參方也是面試最?？嫉膬?nèi)容，猶記得當(dāng)初剛出來(lái)實(shí)習(xí)的時(shí)候，遇到一個(gè)需求，大概就是一個(gè)tabs下面有五個(gè)子頁(yè)面，每個(gè)子頁(yè)面表示訂單的一種狀態(tài)。當(dāng)時(shí)是把五個(gè)子頁(yè)面抽成了五個(gè)組件，做完后又有一個(gè)問(wèn)題，就是在一個(gè)頁(yè)面更改了數(shù)據(jù)狀態(tài)之后，切換到另一個(gè)頁(yè)面的時(shí)候要通知這個(gè)頁(yè)面更新數(shù)據(jù)，當(dāng)時(shí)是完全沒(méi)有思路，找?guī)业拇蟾缃涛?，講了半天還是沒(méi)有懂，最后還是大哥手把手的教我寫(xiě)完的，那時(shí)候覺(jué)得大哥好厲害，666，現(xiàn)在一想起來(lái)，不就是最簡(jiǎn)單的兄弟組件之前參數(shù)傳遞嗎？??今天就來(lái)回憶一下工作中常用的幾種組件傳參的方式。

父子組件之間傳參

父子組件之間最常用的組件傳參方式就是：父?jìng)髯邮褂?code>v-bind:attr傳遞，子組件使用props接收，子傳父使用方法傳遞，父組件在方法參數(shù)中獲取，即$emit['method':val],父組件使用@method接收。

// 父?jìng)髯?
// 父組件
<template>
    <div>
        父組件
        <br/>
        <child  :name="name"  @getChild="getChild"/>
    </div>
</template>
<script>
  export default {
     data(){
       return {
         name:'father'
       }
     },
     methods:{
       getChild(val){
         console.log(val)  // 123
       }
     }
  }
</script>
// 子組件
<template>
    <div>
        子組件
        <br/>
        {{name}}
        <button @click="toParent">傳到父組件</button>
    </div>
</template>
<script>
  export default {
     props:{
       name:{ type: String, default:''}
     },
     data(){
       return {
       }
     },
     methods:{
       toParent(){
         this.$emit('getChild',123)
       }
     }
  }
</script>

除此之外，vue還提供了一種語(yǔ)法糖，可以簡(jiǎn)單的實(shí)現(xiàn)父子組件間數(shù)據(jù)的雙向綁定。

// 父組件
<template>
    <div>
        父組件
        <br/>
        <child  :name.sync="name" />
    </div>
</template>
<script>
  export default {
     data(){
       return {
         name:'father'
       }
     }
  }
</script>
// 子組件
<template>
    <div>
        子組件
        <br/>
        {{name}}
        <button @click="toParent">傳到父組件</button>
    </div>
</template>
<script>
  export default {
     props:{
       name:{ type: String, default:''}
     },
     data(){
       return {
       }
     },
     methods:{
       toParent(){
         this.$emit('update:name',123)
       }
     }
  }
</script>

父組件還可以使用$refs直接調(diào)用子組件的所有屬性和方法，但是并不推薦使用這種方法。

<child ref="child"></child>
// 父組件可以使用$refs.child.xxx直接調(diào)用子組件的屬性和方法

兄弟組件之間傳參

兄弟組件之間傳參可以使用vuex、localStorage、sessionStorage、EventBus事件中轉(zhuǎn)，前面三種方法無(wú)非就是找第三方把數(shù)據(jù)存起來(lái)，需要的時(shí)候再獲取就行，這里主要講一下事件中轉(zhuǎn)的用法。

// 1.首先在app.vue種定義一個(gè)中轉(zhuǎn)站，再掛載到全局對(duì)象上面。
// App.vue
Vue.prototype.$eventBus = new Vue()
// 2.在需要傳遞的頁(yè)面使用$emit(eventName,params)發(fā)射參數(shù)
this.$eventBus.$emit(eventName,params)
// 3.在需要接收參數(shù)的頁(yè)面使用$on(eventName,(params) => {}) 接收參數(shù)
this.$eventBus.$on(eventName,(params) => {})

這種方法其實(shí)還可以用于跨層級(jí)傳參，以前我很抵觸這種用法，后來(lái)用過(guò)一次之后覺(jué)得真香啊。還有需要注意的一點(diǎn)就是在組件銷(xiāo)毀的時(shí)候記得移除監(jiān)聽(tīng)的事件綁定，使用$eventBus.$off(eventName)實(shí)現(xiàn)事件監(jiān)聽(tīng)移除。

provide/inject傳參

provide/inject可以用于跨層級(jí)傳參，不過(guò)只能從上到下：

// 在上級(jí)組件中使用provide修飾的數(shù)據(jù)，在下級(jí)組件中可以使用inject接收，類似于props
 // 上級(jí)組件
 <script>
   export default {
     data(){
      return {
        age: 12
      }
     },
     provide(){
       return {
         name: 111,
         age: this.age
       }
     }
   }
   // 下級(jí)組件
    <script>
   export default {
     data(){
      return {
      }
     },
     inject:['name'，'age'] // 使用時(shí)當(dāng)data數(shù)據(jù)使用就行
   }
 </script>

值得注意的是，如果上級(jí)組件傳的數(shù)據(jù)是響應(yīng)式的，那么接收到的數(shù)據(jù)就是響應(yīng)式的，反之亦然。