Question

我正在努力解决为什么以下代码代码不适用于子页面和父单页组件。

Child.vue

<script>
export default {
  name: 'ChildComponent',
  data () {
      return {}
  }
  mounted: function() {
      this.emitSignal()
  },
  methods: {
    emitSignal: function () {
      console.log('>>emitSignal()')
      this.$emit('my_signal')
    }
  }
}
</script>

Parent.vue

<template>
  <div>
        <child-component v-on:my_signal="doSomething"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
    name: 'ParentComponent',
    data () {
      return {
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      doSomething: function () {
        console.log('doSomething')
      }
    }
  }
</script>

如果我运行应用程序，我会看到孩子在控制台中发出信号＆gt;＆gt; emitSignal（），但父函数'doSomething'不会运行。

知道我可能缺少什么吗？

注意我还尝试了一个事件总线，如下所示：https://alligator.io/vuejs/global-event-bus/，孩子会触发，但父母不会拦截信号并运行指定的功能。

Answer 1

您的emit代码没问题，除了Child.vue中data阻止后丢失的逗号

工作示例：https://jsfiddle.net/63t082p2/42/

<div id="app">
  <child v-on:my_signal="doSomething"></child>
</div>

new Vue({
    el: '#app',
    methods: {
    doSomething: function () {
      console.log('doSomething')
    }
  },
  components: {
    'child' : {
      mounted: function() {
          this.emitSignal()
      },
      methods: {
        emitSignal: function () {
          console.log('>>emitSignal()')
          this.$emit('my_signal')
        }
      }
    }
  }
});

父母没有收到Vue.js $

1 个答案: