快捷導航

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

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

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

前言

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

父子組件之間傳參

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

// 父傳子
// 父組件
<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還提供了一種語法糖，可以簡單的實現(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)，前面三種方法無非就是找第三方把數(shù)據(jù)存起來，需要的時候再獲取就行，這里主要講一下事件中轉(zhuǎn)的用法。

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

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

provide/inject傳參

provide/inject可以用于跨層級傳參，不過只能從上到下：

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

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