Vue 組件間的傳值（通訊）

CloudDeveloper 發布于2019-08-29 16:12 / 2320人閱讀

摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用接收，子組件在模板里可以通過的形式進行使用。

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

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

父組件調用子組件的地方，

添加自定義屬性，屬性名隨便定義（但是不要定義id,class等）

屬性值為你需要傳遞的值（這個值可以是變量，如果是變量則使用綁定屬性）

定義子組件的地方，

添加一個選項props，它是一個數組

數組中的元素就是父元素提供的屬性名

那么，在子組件內部就可以直接使用父組件中定義的屬性名，得到傳遞過來的屬性值

2 子組件給父組件傳值

子組件給父組件傳值（相對于父給子傳麻煩一點，就如我們常說的人往高處走，水往低處流嘛，如果要想水井里面的水到達地面上來，最起碼我們要有個管，這個管就是子組件給父組件傳值的通道）

子組件中，定義好一個事件標識，--- to-parent（相當于定義好了通道）（注意不要駝峰式命名）

然后通過this.$emit("to-parent", 傳遞的值)

父組件調用子組件的地方，執行這個事件，-----事件標識 to-parent

父組件實現方法getMoney，得到的值就是子組件傳遞給父組件的值

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()進行使用

云服務器 GPU云服務器 vue父子組件通訊 jsp頁面中的傳值 vue組件 vue組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113592.html

Vue 組件間的傳值（通訊）

摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用接收，子組件在模板里可以通過的形式進行使用。組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊 1 父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用props接收，子組件在模板里可以通過{{}}的...

netmou 2019-08-23 10:31 評論0 收藏0
Vue 組件間的傳值（通訊）

摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用接收，子組件在模板里可以通過的形式進行使用。組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊 1 父組件給子組件傳值子組件嵌套在父組件內部，父組件給子組件傳遞一個標識，在子組件內部用props接收，子組件在模板里可以通過{{}}的...

source 2019-08-02 11:03 評論0 收藏0
React父子組件間的傳值

摘要：父組件默認值默認值哈哈哈哈傳值給子組件接受子組件的傳值為子組件啦啦啦啦接受父組件傳的值為傳值給父組件父組件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...

寵來也 2019-08-23 13:08 評論0 收藏0
幾種常見的Vue組件間的傳參方式

摘要：缺點用這種方法寫出來的組件十分難維護，因為你并不知道數據的來源是哪里，有悖于單向數據流的原則拿到的是一個數組，你并不能很準確的找到你要找的子組件的位置，尤其是子組件多的時候。幾種常見的Vue組件間的傳參方式 Vue父子組件通訊的方法其實有很多，本文只是做一個總結，說說他們的優缺點，具體如何使用相關文檔和網上大神已經總結的很多里，這里就不再說明。 1.Vuex 介紹 Vuex 是一個專...

TalkingData 2019-08-23 14:01 評論0 收藏0
關于vue中組件傳值的一些問題

摘要：一父子組件之間的傳值父組件傳遞給子組件需要在子組件中通過接收值子組件傳遞給父組件自定義事件，要傳輸的值子父在子組件中需要通過點擊事件傳遞給父組件值，點擊事件觸發后，通過自定義事件，要傳遞的值注意在父組件接收時必須在對應的子組件接收相應一：父子組件之間的傳值** 父組件傳遞給子組件：需要在子組件中通過props接收值子組件傳遞給父組件：$emit(自定義事件，要傳輸的值) 子--->父...

chnmagnus 2019-08-26 10:44 評論0 收藏0