一、props/$emit父子組件傳值：

父?jìng)髯?(自定義屬性 props)

父組件向子組件傳參，通過(guò)自定義屬性的方式進(jìn)行傳參，在子組件中使用prop定義自定義的屬性，然后在父組件中通過(guò)v-bind指令把需要傳遞的數(shù)據(jù)綁定在子組件上，那在子組件中props里面的自定義屬性可以直接使用。

//父組件代碼   渲染子組件
<Son  :name="name" />

 // 子組件代碼，接受父參數(shù)
export default {
  props: {
    name:{
                type:String,
                default:"我是默認(rèn)字符串"http://定義參數(shù)默認(rèn)值
                required:false//定義參數(shù)是否必須值
            }
  }
}

子傳父 (自定義事件 this.$emit)

子組件向父組件傳數(shù)據(jù)使用自定義事件， vue 組件提供了一個(gè)emit(‘自定義事件名’， 傳遞的數(shù)據(jù)) )，子組件傳遞數(shù)據(jù)時(shí)，觸發(fā)響應(yīng)的事件函數(shù)，就會(huì)自動(dòng)觸發(fā)通過(guò)$emit給父組件綁定的自定義事件，自定義事件接受一個(gè)參數(shù)，參數(shù)就是子組件傳遞過(guò)來(lái)的數(shù)據(jù)。

// 父組件代碼，渲染子組件
<Son   @setValue="valueFn" />
export default{
  method:{
    valueFn(value) {}
  }
}
// 子組件代碼
this.$emit('setValue', this.say)

二、ref與parent/children父子組件傳值:

父?jìng)髯?/h3>

//父組件
<Home ref="home"></Home>
<button @click="toValue">點(diǎn)擊</button>
methods:{
  toValue(){
          this.msg = "這是父組件的值";
          this.$refs.home.setMsg(this.msg);
   }
}
//子組件
<div class="home">
      {{msg}}
 </div>
    methods:{
        setMsg(val){
            this.msg = val;
        }
    }

子傳父（如果子組件是公共組件，需判斷父組件是否具有該方法）

//父組件
<Home ref="home"></Home>
methods:{
  toValue(val){
          this.msg = val
   }
}
//子組件
<div class="home">
<button @click="setMsg">點(diǎn)擊</button>
 </div>
    methods:{
        setMsg(val){
             this.$parent.toValue(this.msg);
        }
    }

三、兄弟之間傳參

兄弟組件之間的數(shù)據(jù)傳遞，通過(guò)eventBus來(lái)做中間的橋梁，傳輸方通過(guò)中間組件調(diào)用 emit 傳數(shù)據(jù)，接收方通過(guò)on 接受數(shù)據(jù)，兩者之間的自定義屬性名保持一致。

// 傳輸方組件調(diào)用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);
// 接收方接受參數(shù)
import Bus from '@/EventBus.js'
created() {
  Bus.$on('pass-value', val => {
     this.sibilingValue = val;
  })
}

四 $attrs/$listeners隔代組件傳值（爺孫組件參數(shù)互傳）

• $attrs
  1.包含了父作用域中不被 prop 所識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外);
  2.當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò) v-bind=“$attrs” 傳入內(nèi)部組件。通常配合 interitAttrs 選項(xiàng)一起使用。
• $listeners
  1.包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。
  2.它可以通過(guò) v-on=“$listeners” 傳入內(nèi)部組件。
• 簡(jiǎn)單來(lái)說(shuō)：$attrs 與$listeners是兩個(gè)對(duì)象，$attrs 里存放的是父組件中綁定的非 Props 屬性，$listeners 里存放的是父組件中綁定的非原生事件。

爺傳孫（$attrs）

    //爺組件
    <div id="app">
      <Home :msg="msg"></Home>
    </div>
    //父組件(父組件的操作最簡(jiǎn)單，但不做就會(huì)傳不過(guò)去)
    <div class="home">
      <Sun v-bind="$attrs"></Sun>
    </div>
    //孫組件
    <div class="sun">
      {{ msg }}
    </div>
    //props直接接受 
    props:{ msg:String, }

孫傳爺（$listeners）

    //爺組件
    <div id="app">
      <Home @setVal="setVal">></Home>
    </div>
    methods:{ setVal(val){ this.msg = val; } }
    //父組件(父組件的操作最簡(jiǎn)單，但不做就會(huì)傳不過(guò)去)
    <div class="home">
      <Sun v-on="$listeners"></Sun>
    </div>
    //孫組件
    <div class="sun">
      <button @click="toVal">點(diǎn)我</button>
    </div>
    methods:{ toVal(){ this.$emit("setVal",this.msg) } }

五、通過(guò)Vuex數(shù)據(jù)共享

通過(guò)Vuex存儲(chǔ)數(shù)據(jù)， Vuex是一個(gè)專為vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式， 它采用集中式存儲(chǔ)管理數(shù)據(jù)，以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生改變， 一變?nèi)儯礁聰?shù)據(jù)。

// 注冊(cè)代碼
const store = new Vue.Store({
  state:{
    count: 100
  },
  mutations: {
    addCount(state, val = 1) {
      state.count += val;
    }，
    subCount(state, val = 1) {
      state.count -= val;
    }
  }
})

// 組件調(diào)用
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 減 1

到此這篇關(guān)于vue組件常用的父子、兄弟、跨組件等傳值方法的文章就介紹到這了,更多相關(guān)vue組件的傳值方法(父子\兄弟\跨組件)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論