>[success] # 移除$listeners -- 非兼容 ~~~ 1.$listeners 對象在 Vue 3 中已被移除。現在事件監聽器是 $attrs 的一部分 ~~~ >[info] ## vue2.x 使用 ~~~ 1.'$listeners' 和'$attrs' 出發點的解決思路是一樣的，前者是針對事件，后者是針對屬性 ~~~ >[danger] ##### 案例說明 ~~~ 1.如果在父組件調用子組件的過程中事件配合'.native' 修飾符相當于給子組件加了一個事件，這樣的好處 如果子組件內沒有事件暴露出，但我們僅僅只是想通過操作子組件觸發父組件的一些事，在通俗的理解 將子組件看做了一個普通dom 并且綁定了一個事件 2.先了解'v-on' 他是支持' v-on="{ mouseover: doTish, mouseout: doThat }"' 這種對象形式的使用 ~~~ >[danger] ##### 上面第一條的案例解釋 ~~~ 1.下面案例如果事件沒有使用'native'修飾符點擊事件是不生效的，可以這么理解沒有加是認為你在子組件 通過'$emit'將子組click事件暴露出來，加了理解成整體認為是一個dom元素僅僅是一個元素的click事件 2.子組件是由 'div' 嵌套 'button' 那通過'native'修飾的子組件被處罰事件屬于div 還是屬于button，這取決于 用戶點擊的位置，如果用戶點擊的位置是div 那么就是div觸發的click事件 相反就是button觸發 ~~~ * 父組件 ~~~ <template> <div> <my-button @click.native="onUseListener"></my-button> <!-- 不生效 --> <!-- <my-button @click="onUseListener"></my-button> --> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { onUseListener() { console.log(event.target) // 具體看你點的dom元素位置 } } } </script> <style scoped lang="less"></style> ~~~ * 子組件 ~~~ <template> <div> <button>ss</button> </div> </template> <script> export default { name: 'button' } </script> ~~~ >[danger] ##### $listeners 使用 ~~~ 1.下面課看出通過$listeners 在子組件在進行簡寫 ~~~ ~~~ <template> <div> <my-button @click="onUseListener" @mouseover='parentTest'></my-button> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { onUseListener() { console.log('onUseListener') // 具體看你點的dom元素位置 }, parentTest() { console.log('parentTest') } } } </script> <style scoped lang="less"></style> ~~~ * 沒有使用 ~~~ <template> <div> <button @click='childrenClick' @mouseover='childrenTest'>ss</button> </div> </template> <script> export default { name: 'button', mounted() { console.log(this.$listeners) }, methods: { childrenClick() { this.$emit('click') }, childrenTest() { this.$emit('mouseover') } } } </script> ~~~ * 使用 ~~~ <template> <div> <button v-on='$listeners'>ss</button> </div> </template> <script> export default { name: 'button', mounted() { console.log(this.$listeners) // {click: ?, mouseover: ?} }, methods: { click() { this.$emit('click') }, test() { this.$emit('test') } } } </script> ~~~ >[danger] ##### 更多具體的參考這個 [跨層級](https://www.cnblogs.com/badaozongcai/articles/12791262.html) [利用計算屬性合并](https://www.jumtu.com/article/116843.html) >[info] ## vue3.0 ？？ 有點蒙蔽后續看 ~~~ 1.在 Vue 3 的虛擬 DOM 中，事件監聽器現在只是以 on 為前綴的 attribute，這樣就成了 $attrs 對象的一部分， 因此 $listeners 被移除了。 ~~~ >[danger] ##### 案例 ~~~ 1.如果是事件，在'$attrs' 對應的key 要加on 例如下面案例在'$attrs' 為 { onMouseover:fn..., onClick:fn..., } ~~~ ~~~ <template> <div> <my-button @click="onUseListener" @mouseover='parentTest'></my-button> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { onUseListener(val) { console.log('onUseListener') }, parentTest() { console.log('parentTest') } } } </script> <style scoped lang="less"></style> ~~~ ~~~ <template> <button v-bind="$attrs">ss</button> </template> <script> export default { inheritAttrs: false, mounted() { console.log(this.$attrs) } } </script> ~~~ >[danger] ##### vue3.x 移除.native ~~~ 1.移除后在以前使用.native 去掉即可 邏輯思維整體還是一樣的 ~~~