Question

我有以下情况：

var grandParend = new Vue({
  components:[parent,child]
  el: '#app',
  template: 
    <parent>
      <child v-on:my-event="eventHandler"><child>
    <parent>
  data: {
    message: 'Hello Vue!'
  },
   methods:{
     eventHandler(){
            // event handler
     }

})

和孩子

 Vue.component('child', {
 template: '<button @click="onClick">emit event</button>',
   methods:{ 
     onClick(){
       this.$emit('my-event')
     }

})

如何将事件形式的孩子发送到直接父母？如何将事件形式的子事件发送给父母？

谢谢

Answer 1

您只需使用events从您的子组件中发出事件，并在您的（大） - 父母中处理它们。

我用你的例子做了一个小提示：https://jsfiddle.net/oLojabhg/2/

<div id="app">
</div>

var child = Vue.component('child', {
 template: '<button @click="onClick">emit event from child</button>',
   methods:{ 
     onClick(){
       this.$emit('my-event')
     }
   }
})

var grandParend = new Vue({
  components: { parent: parent, child: child },
  el: '#app',
  template: '<parent><child v-on:my-event="eventHandler"></child></parent>',
   methods:{
     eventHandler(){
        console.log('event handled!')
     }
   }
})

请注意，您实际上无法将侦听器添加到插槽中，但在大多数用例中，这不应该是一个问题。更多信息可以在这里找到：

从插槽向祖父母发出事件

1 个答案: