鍍金池/ 問答/HTML/ 請教vue的屬性方法和事件調(diào)用有什么區(qū)別?

請教vue的屬性方法和事件調(diào)用有什么區(qū)別?

假設(shè)有以下這個例子:

1、父組件

<template>
    <test1 :handleChange="onChange" />
    <test2 @handleChange="onChange" />
</template>
<script>
...
methods: {
    onChange(data) {...}
}
...
</script>

2、test1 組件

<template>
    <div @click="onChange"></div>
</template>
<script>
...
props: {
    handleChange: Function
},
methods: {
    onChange() {
        this.handleChange(123)
    }
}
...
</script>

3、test2 組件

<template>
    <div @click="onChange"></div>
</template>
<script>
...
methods: {
    onChange() {
        this.$emit("handleChange", 123)
    }
}
...
</script>

問題:

test1 組件和 test2 組件,都向外部委派了事件,但是一個是用的屬性方法的形式,一個是用的委派事件的形式。父組件進(jìn)行調(diào)用的時候,發(fā)現(xiàn)它倆都能執(zhí)行相同的事兒。
請問它們的區(qū)別是什么呢?


我目前知道的區(qū)別是:
1、使用屬性的形式,相當(dāng)于把外部的方法傳遞給子組件來進(jìn)行調(diào)用;而委派事件的方式,是子組件向外部報告一個事件,由外部來進(jìn)行接收執(zhí)行。

回答
編輯回答
風(fēng)畔

從執(zhí)行結(jié)果來看,區(qū)別不大;從代碼架構(gòu)層面來看,比較推薦“事件-偵聽”機(jī)制。因為后者有助于父子組件之間解耦,即父組件不要求一定是這個子組件,子組件也不要求父組件一定要傳處理函數(shù)不然就報錯。

2018年3月14日 12:04
編輯回答
離觴

第一個是典型的父子數(shù)據(jù)傳遞。優(yōu)點就是可以很方便的看到函數(shù)調(diào)用關(guān)系。缺點是如果組件不是父子關(guān)系,那么就需要一層層傳遞下去,很難受。另外耦合性比較嚴(yán)重。父子組件不滿足”最小知識原則“。 不過原則這種東西,可不是必須要遵守的,比如jquery的prop方法既可以獲取屬性又可以設(shè)置數(shù)據(jù),就不滿足單一職責(zé)原則。

第二個則是發(fā)布訂閱者模式。 更有利于解耦。另外也不要求接受事件和發(fā)送事件的組件是父子關(guān)系。缺點就是一旦亂用這種模式,會造成很嚴(yán)重的混亂, 很容易理不清系統(tǒng)的流程和數(shù)據(jù)走向。

2018年8月9日 14:25
編輯回答
尐飯團(tuán)

組件的設(shè)計是有一定原則的。

這里的父子組件,父組件自己的方法,最好是控制在父組件里,方便閱讀和可控。
另外,父組件的方法在父組件里執(zhí)行,這樣響應(yīng)方法里基本都是對父組件的屬性操作,放子組件里不能操作父組件里的屬性。

2018年6月21日 09:31
編輯回答
離魂曲

請使用第二種, 解耦是組件設(shè)計必備的, 第一個可用性不高

2017年9月30日 12:44