Vue 元件間的傳值（通訊）

石奇聰發表於2019-02-16
Vue元件

元件之間的通訊分為三種 父給子傳 子給父傳 兄弟元件之間的通訊

1 父元件給子元件傳值

子元件巢狀在父元件內部，父元件給子元件傳遞一個標識，在子元件內部用props接收，子元件在模板裡可以通過{{}}的形式進行使用。如果父元件給子元件傳遞的標識中含有—，子元件在接收時採用駝峰式接收。

  • 父元件呼叫子元件的地方，
  • 新增自定義屬性，屬性名隨便定義（但是不要定義id,class等）
  • 屬性值為你需要傳遞的值（這個值可以是變數，如果是變數則使用繫結屬性）
  • 定義子元件的地方，
  • 新增一個選項props，它是一個陣列
  • 陣列中的元素就是父元素提供的屬性名
  • 那麼，在子元件內部就可以直接使用父元件中定義的屬性名，得到傳遞過來的屬性值

2 子元件給父元件傳值

  • 子元件給父元件傳值（相對於父給子傳麻煩一點，就如我們常說的人往高處走，水往低處流嘛，如果要想水井裡面的水到達地面上來，最起碼我們要有個管，這個管就是子元件給父元件傳值的通道）
  • 子元件中，定義好一個事件標識，— to-parent（相當於定義好了通道）（注意不要駝峰式命名）
  • 然後通過this.$emit(`to-parent`, 傳遞的值)
  • 父元件呼叫子元件的地方，執行這個事件，—–事件標識 to-parent
  • <v-son @to-parent=”getMoney”></v-son>
  • 父元件實現方法getMoney，得到的值就是子元件傳遞給父元件的值

<template id=”son”>
<div>
我是孩子
<button @click=”giveMoney(10000)”>給父母打錢</button>
</div>
</template>
<template id=”test”>
<div>
<button @click=`count++`>點選次數{{count}}</button>,
這個月孩子打了{{money}}元錢
<v-son @to-parent=”getMoney”></v-son>
</div>
</template>

const Son = {
template: “#son”,
data () {
return {
}
},
methods: {
giveMoney (val) {
// 你辦了卡，把卡給了父母，你打錢
this.$emit(`to-parent`, val)
}
}
}
// 1、定義元件 —- 元件的首字母必須大寫
const Test = {
template: “#test”,
data () {
return {
money: 0
}
},
methods:{
getMoney ( val ) {
this.money = val
}
},
components: {
`v-son`: Son
}
}

3 非父子間的傳值

非父子間的傳值我個人覺得算是元件傳值中最麻煩的一個，你說它難她也難，說它簡單它也簡單，我們只要定義好一方負責監聽一方負責觸發即可，他們之間相互傳值依據的是中央事件匯流排，也就是new vue ,相當於飛機場中的塔臺一樣，都受它指揮。

$on 負責監聽事件
$emit 負責觸發事件 並傳遞引數
    如果有AB兩個元件，如果A要給B傳值，B就必須先監聽A，使用起來比較麻煩。
事件的中央匯流排 （飛機塔臺，郵差的故事）
在src下建立bus.js
var bus = new Vue() //中央事件匯流排
export default bus ；
假如有AB兩個元件
在AB元件中引入bus中央事件匯流排

在A元件中傳送一個資訊給B元件

methods:{
    sendData(val){
   bus.$emit("A-B",val)
    }
  }
mounted（）{
    bus.$on("B-A",function(val){
        console.log（val）
})
}
在B元件內接收
mounted（）{
    bus.$on("A-B",function(val){
        console.log（val）
          bus.$emit("B-A",val)
})
}

如果AB元件有兩次互動，就會有四次事件，如果做三次事件就會有六次事件
其實最麻煩的不是他們之間的傳值，而是定義他們之間的事件名稱，如果沒有一套完備定義事件名稱的規則，會無端的增加專案開發的週期，降低了開發效率，程式碼的耦合度會增加，維護性也低了。
所以不建議使用

可以在main.js中
vue.prototype.$bus = new Vue()在原型上擴充套件一個$bus
不用單建立bus檔案
通過this.$bus.$on()進行使用

相關文章