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

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

父子組件之間傳參

父子組件之間最常用的組件傳參方式就是：父傳子使用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'] // 使用時當(dāng)data數(shù)據(jù)使用就行
   }
 </script>

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

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