vue的根实例上使用$emit/$on的问题

  • Z时代
  • 2024-02-23
  • 分类：IT

代码是这样的

app.vue

...
 window.addEventListener('keydown', e => {
            const key = e.key
            switch (key) {
                    case 'Enter':
                        this.$root.$emit('keydown', { key: 'enter' })
                        break
                    case 'Tab':
                        this.$root.$emit('keydown', { key: 'tab' })
                        break
                    case 'ArrowUp':
                        this.$root.$emit('keydown', { key: 'up' })
                        break
                    case 'ArrowDown':
                        this.$root.$emit('keydown', { key: 'down' })
                        break
                    default:
            }
    })

通过插件形式调用挂载的组件(即使用Vue.extend(),然后this.$xxx.show()的形式)

省略main.js
main.vue如下
...
mounted() {
        this.initKeyDown()
    },
    methods: {
        initKeyDown() {
            console.log(1)
            this.$root.$on('keydown', e => {
                console.log(2)
                const { key } = e
                let focusType = this.$root.focusType
                if (key === 'up') {
                    if (focusType === 'menu-dialog') {
                        this.hoverIndex = this.hoverIndex === 0 ? 0 : this.tab - 1
                    }
                }

以上的this.$root.$emit和$on在组件中使用是正常的，仅在插件调用的组件中异常。
异常是：
上面代码可以打印出1，但打印不出2，我试着把initKeyDown的调用方法放在show中，也是一样。
不清楚是为什么，有人遇到过吗？是怎么解决呀？谢谢..

21-12-8更新

原因已经找到了，插件调用的组件，this.$root指向的$el不对。

插件调用
vue的根实例上使用$emit/$on的问题

标签组件调用
vue的根实例上使用$emit/$on的问题

问题未解决。已改用其它全局广播收听方式实现，从而避开了this.$root.$emit/$on的方式

回答：

在case里面加个打印看走不走，不清楚这个key对不对，如果走的话，打印下this，有可能this指的不是一个。

以上是 vue的根实例上使用$emit/$on的问题 的全部内容， 来源链接： utcz.com/p/936639.html

回到顶部