Question

一个简单的问题，如果我调用this。$ emit，它应该是异步函数还是可以预期呢？$ on的回调会立即被调用？

谢谢

Answer 1

它立即被调用： https://codepen.io/anon/pen/MLYKpr?editors=1111

methods: {
  emitEvent() {
    this.$emit('myEvent')
    console.log('emitted')
  },
},
mounted() {
  this.$on('myEvent', () => {
    console.log('triggered')
  })
}

日志：

"triggered"
"emitted"

Answer 2

我提出这个问题是因为我遇到了一个问题，即发射后道具的“旧”值。举个例子

Vue.component('child', {
  props: ['count'],
  methods: {
    emitEvent() {
      this.$emit('increment')
      console.log('after emit', this.count);
      Vue.nextTick(() => {
        console.log('next tick', this.count);
      })
    },
  },
  template: `<div>count {{count}}. <button @click="emitEvent()">emit</button></div>`
})

const example2 = new Vue({
  el: "#root",
  data: {
    count: 100,
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  template: `<div id="example-2"><child :count="count" @increment="increment" /></div>`
});

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

<div id="root"></div>

我希望在发出我的 count 值后会立即更新，但事实并非如此。它仅在下一个刻度中更新。当您希望同步执行 $emit 时，请记住这一点。

Vue的$ emit异步操作吗？

2 个答案: