vue.js解雇$ emit没有收到$ emit

Question

＆＃13;

＆＃13;

Vue.component('rating-edit', {
    template:`
    <form>
      <input v-model="rating.title" type="text">
      <textarea v-model="rating.remark">{{rating.remark}}</textarea>
      <button type="button"
        @click="submit">
        Save
      </button>
    </form>`,
    props:['rating'],
    methods: {
      submit: function submit () {
        let rating = this.rating;
        this.$emit('submit', rating);
        console.log('submit was emitted');
      }
    }
  });

const aRating = {
    title: 'title',
    remark: 'remark'
  };

let vueApp = new Vue({
    el: '#rating-edit-container',
    data: {
      rating: aRating
    }
  });

vueApp.$on('submit', function(rating) {
  console.log('vue on submit', rating);
});

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="rating-edit-container">
  <rating-edit :rating="rating"></rating-edit>
</div>

＆＃13;

＆＃13;

＆＃13;

在传统的前端代码中，我想实现一个基于vue的组件化表单，并让它在提交时返回数据。

这是组件代码。请注意提交功能触发this.$emit('submit', rating);

let result = {
  props:['rating'],
  methods: {
    submit: function submit () {
      let rating = this.rating;
      this.$emit('submit', rating);
      console.log('submit fired');
    }
  }
};

export default result;

现在在遗留代码中，我正在等待事件：

import Vue from 'vue';
import ratingEditVue from './rating-edit.vue';


Vue.component('rating-edit', ratingEditVue);

const aRating = {
  title: 'title',
  remark: 'remark'
};

let vueApp = new Vue({
  el: '#rating-edit-container',
  data: {
    rating: aRating
  }
});

vueApp.$on('submit', function(rating) {
  console.log('vue on submit', rating);
});

据我了解Vue事件，这应该有效。但$ on（＆＃39; submit＆＃39;，handlerFunction）永远不会被调用。

附录：

我摆弄了这个例子。我为首先没有这样做而道歉。

Answer 1

问题是您的rating-edit组件的范围深度相同。

如果你用this.$parent.$emit向父母发射，那么父母将收到该事件。请注意，如果您需要在多个地方或多个深度执行此操作，则需要使用事件总线。

＆＃13;

＆＃13;

Vue.component('rating-edit', {
    template:`
    <form>
      <input v-model="rating.title" type="text">
      <textarea v-model="rating.remark">{{rating.remark}}</textarea>
      <button type="button"
        @click="submit">
        Save
      </button>
    </form>`,
    props:['rating'],
    methods: {
      submit: function submit () {
        let rating = this.rating;
        this.$parent.$emit('submit', rating);
        console.log('submit was emitted');
      }
    }
  });

const aRating = {
    title: 'title',
    remark: 'remark'
  };

let vueApp = new Vue({
    el: '#rating-edit-container',
    data: {
      rating: aRating
    }
  });

vueApp.$on('submit', function(rating) {
  console.log('vue on submit', rating);
});

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="rating-edit-container">
  <rating-edit :rating="rating"></rating-edit>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

vueApp.$on('submit', function(rating) {
  console.log('vue on submit', rating);
});

此处的处理程序只会在响应submit直接发出的vueApp事件（即vueApp.$emit('submit')）时执行，我认为这不会发生在您的代码中（没有完全提供）。

Vue事件不会冒泡。

假设您的#rating-edit-container模板是这样的：

<template id="rating-edit-container">
  <div>
    <rating-edit @submit="onRatingSubmit"></rating-edit>
  </div>
</template>

然后你应该在你的组件的方法中声明你的处理程序（onRatingSubmit），如下所示：

let vueApp = new Vue({
  el: '#rating-edit-container',
  methods: {
    onRatingSubmit(rating) {
      console.log('rating submit', rating);
    },
  },
});

修改

您仍然遇到与我所述相同的问题。我修改了您的代码段，方法是删除$parent而不是this上的发射，并在模板中的<rating-edit>元素上注册侦听器。

＆＃13;

＆＃13;

Vue.component('rating-edit', {
    template:`
    <form>
      <input v-model="rating.title" type="text">
      <textarea v-model="rating.remark">{{rating.remark}}</textarea>
      <button type="button"
        @click="submit">
        Save
      </button>
    </form>`,
    props:['rating'],
    methods: {
      submit: function submit () {
        let rating = this.rating;
        this.$emit('submit', rating);
        console.log('submit was emitted');
      }
    }
  });

const aRating = {
    title: 'title',
    remark: 'remark'
  };

let vueApp = new Vue({
    el: '#rating-edit-container',
    data: {
      rating: aRating
    },
    methods: {
      onSubmit(rating) {
        console.log('vue on submit', rating);
      },
    },
  });

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="rating-edit-container">
  <rating-edit :rating="rating" @submit="onSubmit"></rating-edit>
</div>

＆＃13;

＆＃13;

＆＃13;