成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue 組件間的傳值（通訊）

netmou / 1187人閱讀

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

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

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

父組件調(diào)用子組件的地方，

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

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

定義子組件的地方，

添加一個選項props，它是一個數(shù)組

數(shù)組中的元素就是父元素提供的屬性名

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

2 子組件給父組件傳值

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

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

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

父組件調(diào)用子組件的地方，執(zhí)行這個事件，-----事件標(biāo)識 to-parent

父組件實現(xiàn)方法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 非父子間的傳值

非父子間的傳值我個人覺得算是組件傳值中最麻煩的一個，你說它難她也難，說它簡單它也簡單，我們只要定義好一方負(fù)責(zé)監(jiān)聽一方負(fù)責(zé)觸發(fā)即可，他們之間相互傳值依據(jù)的是中央事件總線，也就是new vue ,相當(dāng)于飛機(jī)場中的塔臺一樣，都受它指揮。

$on 負(fù)責(zé)監(jiān)聽事件
$emit 負(fù)責(zé)觸發(fā)事件 并傳遞參數(shù)
    如果有AB兩個組件，如果A要給B傳值，B就必須先監(jiān)聽A，使用起來比較麻煩。
事件的中央總線 （飛機(jī)塔臺，郵差的故事）
在src下創(chuàng)建bus.js
var bus = new Vue() //中央事件總線
export default bus ；
假如有AB兩個組件
在AB組件中引入bus中央事件總線

在A組件中發(fā)送一個信息給B組件

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

如果AB組件有兩次交互，就會有四次事件，如果做三次事件就會有六次事件
其實最麻煩的不是他們之間的傳值，而是定義他們之間的事件名稱，如果沒有一套完備定義事件名稱的規(guī)則，會無端的增加項目開發(fā)的周期，降低了開發(fā)效率，代碼的耦合度會增加，維護(hù)性也低了。
所以不建議使用

可以在main.js中
vue.prototype.$bus = new Vue()在原型上擴(kuò)展一個$bus
不用單創(chuàng)建bus文件
通過this.$bus.$on()進(jìn)行使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96419.html

相關(guān)文章

  • Vue 組件間的傳值（通訊）

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

    CloudDeveloper 評論0 收藏0

  • Vue 組件間的傳值（通訊）

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

    source 評論0 收藏0

  • React父子組件間的傳值

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

    寵來也 評論0 收藏0

  • 幾種常見的Vue組件間的傳參方式

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

    TalkingData 評論0 收藏0

  • 關(guān)于vue中組件傳值的一些問題

    摘要：一父子組件之間的傳值父組件傳遞給子組件需要在子組件中通過接收值子組件傳遞給父組件自定義事件，要傳輸?shù)闹底痈冈谧咏M件中需要通過點擊事件傳遞給父組件值，點擊事件觸發(fā)后，通過自定義事件，要傳遞的值注意在父組件接收時必須在對應(yīng)的子組件接收相應(yīng) 一：父子組件之間的傳值** 父組件傳遞給子組件：需要在子組件中通過props接收值子組件傳遞給父組件：$emit(自定義事件，要傳輸?shù)闹? 子--->父...

    chnmagnus 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<