Vue中常見的傳參方式有哪些

今天小編給大家分享一下Vue中常見的傳參方式有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

父子組件之間傳參

父子組件之間最常用的組件傳參方式就是：父傳子使用v-bind:attr傳遞，子組件使用props接收，子傳父使用方法傳遞，父組件在方法參數中獲取，即$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還提供了一種語法糖，可以簡單的實現父子組件間數據的雙向綁定。

// 父組件
<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直接調用子組件的所有屬性和方法，但是并不推薦使用這種方法。

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

兄弟組件之間傳參

兄弟組件之間傳參可以使用vuex、localStorage、sessionStorage、EventBus事件中轉，前面三種方法無非就是找第三方把數據存起來，需要的時候再獲取就行，這里主要講一下事件中轉的用法。

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

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

provide/inject傳參

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

// 在上級組件中使用provide修飾的數據，在下級組件中可以使用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數據使用就行
   }
 </script>

值得注意的是，如果上級組件傳的數據是響應式的，那么接收到的數據就是響應式的，反之亦然。

以上就是“Vue中常見的傳參方式有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。