假設有以下這個例子：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 組件，都向外部委派了事件，但是一個是用的屬性方法的形式，一個是用的委派事件的形式。父組件進行調(diào)用的時候，發(fā)現(xiàn)它倆都能執(zhí)行相同的事兒。請問它們的區(qū)別是什么呢？我目前知道的區(qū)別是：1、使用屬性的形式，相當于把外部的方法傳遞給子組件來進行調(diào)用；而委派事件的方式，是子組件向外部報告一個事件，由外部來進行接收執(zhí)行。
2 回答
冉冉說
TA貢獻1877條經(jīng)驗 獲得超1個贊
從執(zhí)行結(jié)果來看，區(qū)別不大；從代碼架構層面來看，比較推薦“事件-偵聽”機制。因為后者有助于父子組件之間解耦，即父組件不要求一定是這個子組件，子組件也不要求父組件一定要傳處理函數(shù)不然就報錯。
森林海
TA貢獻2011條經(jīng)驗 獲得超2個贊
第一個是典型的父子數(shù)據(jù)傳遞。優(yōu)點就是可以很方便的看到函數(shù)調(diào)用關系。缺點是如果組件不是父子關系，那么就需要一層層傳遞下去，很難受。另外耦合性比較嚴重。父子組件不滿足”最小知識原則“。 不過原則這種東西，可不是必須要遵守的，比如jquery的prop方法既可以獲取屬性又可以設置數(shù)據(jù)，就不滿足單一職責原則。
第二個則是發(fā)布訂閱者模式。 更有利于解耦。另外也不要求接受事件和發(fā)送事件的組件是父子關系。缺點就是一旦亂用這種模式，會造成很嚴重的混亂， 很容易理不清系統(tǒng)的流程和數(shù)據(jù)走向。
添加回答
舉報
0/150
提交
取消