Vuejs $emit 在函数的某些部分不起作用，而在其他部分起作用

Question

我正在使用 vuejs3 并尝试从子组件发出事件。

子组件

<input type="button" v-if="edition_mode" @click="cancel()" class="btn btn-primary" value="Annuler">
[...]
cancel(){
    if(this.new_sav){
        this.$emit('test')
    }else{
        console.log('else')
        this.$emit('test')
    }
},

父组件

<div v-if="creation_form">
    <h4>Ajout Nouveau Sav</h4>
    <sav-form
    :initial_data="null" 
    :li_product="li_product" 
    :new_sav="true" 
    :customer_id="data.customer.id"
    @action="form_action"
    @test="test()"/>
</div>
[...]
test(){
    console.log('test emit works')
}

执行cancel()时，在if情况下$emit()正常工作，但在else情况下，只打印'else'，不执行$emit。我在这里做错了什么？

我在子组件中也有几个按钮，在同一个 div 中，它们都调用不同的函数，但一些函数 'can' 发出事件而其他的则不能。

Answer 1

我不确定您遇到了什么问题，但它在下面的代码片段中运行良好。请看一下，如果还需要 clarification/discussion，请告诉我。

演示 :

Vue.component('child', {
  template: '<div><button @click="cancel()">Trigger emit event from child!</button></div>',
  data() {
    return {
        isValid: true
    }
  },
  methods: {
    cancel: function() {
      this.isValid = !this.isValid;
      if (this.isValid) {
        console.log('valid');
        this.$emit('test');
      } else {
        console.log('not valid');
        this.$emit('test')
      }
    }
  }
});

var vm = new Vue({
  el: '#app',
  methods: {
    getTestEvent() {
      console.log('Emit event from child triggered!');
    }
  }
})

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

Vuejs $emit 在函数的某些部分不起作用，而在其他部分起作用

Vuejs $emit doesnt work in some part of a function, and in other part works

vue.js

emit