Question

我在子组件中发出事件，因此，如果需要，我可以防止它在父组件中发生。有没有办法检索事件对象，这样我就可以在父组件中阻止它？

// child component event
this.$emit('navigationTab');

// parent template event bind
@onTab="on_tab($event)"

// parent handler method
on_tab(event) {
  event.preventDefault
  // ...logic etc
}

仅当y传递这样的事件对象时才有效，我希望直接捕获$ event而不在事件内部发送对象，事件内部可能已经发送了该对象

// child component event
this.$emit('navigationTab', event);

// parent template bind
@navigationTab="on_tab"

// parent handler method
on_tab(event) {
  event.preventDefault
  // ...logic etc
}

Answer 1

事件参数自动作为参数传递给处理程序方法（请参见下面的示例）
您不能在自定义事件上使用preventDefault()，而只能在本机浏览器事件上使用。当然，您不需要这样做，因为自定义事件（由$emit发出）没有任何“默认”行为

const myComponent = Vue.component('myComponent', {
  template: `
    <div>
      <button @click="$emit('myEvent', 'event payload')">Click me!</button>
    </div>
  `
})

const app = new Vue({
  components: {myComponent} ,
  template: `
    <div>
      <myComponent @myEvent="handle" />
    </div>
  `,
  methods: {
    handle(event) {
      console.log("Event received:", event)
    }
  }
})
app.$mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

从父组件中的发射事件中检索$ event对象

1 个答案: