emit事件的顺序疑问

Question

<parent-button @parent-click="handleParentClick"/>

let childButton = {
    template: `
      <button @click="emitChildButton">
      child button
      </button>
    `,
    methods: {
        emitChildButton() {
            this.$emit('child-click', new Date().getTime())
        }
    }
}

let parentButton = {
    template: `
      <child-button @click.native="emitParentClick"/>
      <child-button @child-click="emitParentClick"/>
    `,
    methods: {
        emitParentClick(timeStamp) {
            this.$emit('parent-click', timeStamp)
        }
    }
}

这里 parent Button
写成是 click.native在vue-devtools的events panel中就是正常的 child-click(DOM事件)->冒泡->parent-click(DOM事件)

写成child-click走自定义事件的顺序就变成了parent-click(自定义事件)->child-click(DOM事件)

自定义事件的优先级是优先于DOM事件的吗?

Answer 1

ustbhuangyi 2020-08-02 23:24:46

你父组件的 $emit 执行不也应该是子组件先 $emit 了 child-click 自定义事件，然后在父组件中监听了这个自定义事件执行 emitParentClick 方法才执行的吗。建议你加个 debugger 断点，就知道调用顺序了

• 提问者 qq_枕流_0 #1

  嗯,click.native走的是DOM事件,顺序是事件冒泡的顺序,跟自定义事件的$emit搞混淆了