vue3.x @emit触发事件,如何保证执行顺序
发布于 3 个月前 作者 Rabbitzzc 2592 次浏览 来自 问答

vue3.x @Emit执行顺序问题

在vue2.x中

v-on v-emit

// 父组件
<div @hello="sayHello"></div> 
export default {
	method: {
		sayHello() {
			console.log('hello')
		}
	}
}
// 子组件
export default {
	methods: {
		sayWorld() {
			console.log('hi')
      this.$emit('hello')
      console.log('world')
		}
	}
}

触发事件,输出结果为hi hello world

在vue.3x中

// 子组件
@Component
export default class World extend Vue{
	@ Emit()
	sayWorld():void {
    console.log('hi')
    console.log('world')
  }
}

触发事件,输出结果为hello hi world

想了解一下@Emit如何保证执行顺序?也就是在3.x中如何保证输出hi hello world

16 回复

希望解答一下,谢谢🙂🙂

这个问题真的没人解答嘛

  1. vue3.0还没出,你这是vue2.x的ts写法
  2. 没用过ts写vue,你试试这样可不可以
	@Emit('hello')
    hello() {};
	
	sayWorld(){
	  console.log('hi');
	  this.hello();
	  console.log('world');
	}

@kgdfj 3.x都是ts写的,应该是下半年出来,基本上也是这种写法了

sayhi是父组件的处理 所以才好奇@Emit如何保证函数执行顺序 纯js写的话,毕竟可以按照顺序去处理

@Rabbitzzc 按逻辑来的话,我上面那种写法应该是可以的 6月4号的VueConf: 3.x的写法是function-based, 虽然 2.x的 class-api 也能兼容,但是class-api ts的类型推导难以支持,用ts写 function-based更友好一点

@Rabbitzzc 看官方了吗,3.x 不会有装饰器API, 而且vue2.x支持ts本来就不完善。

不建议这么快入坑vue3.x的函数式编程,目前还没有相关的文档,而且源代码也还没释放。vue3.x基本上是大改以前的风格变成函数式api。

不要谈兼容不兼容的,未来2.x终将变成3.x

建议多花时间在react上会更快上手,到时用使转vue3.x也很快。如果没什么意外,可以考虑vue入坑react。

@xjh22222228 没仔细看,上次看到一个教程,突然想到的,静等vue3.x

@kgdfj 得看一下演讲具体内容了🙄

v3 不会有 class api。

看了一下vue-Conf 尤大的视频 3.x的设计目标在于

  1. 更小更快(比如使用Proxy来做数据劫持绑定, VDOM的重写)
  2. 使用ts
  3. 开放更多底层功能
  4. APi设计统一性

同时也提到了放弃class api的原因:类型推导存在一些问题,ui组件更多是组合,而不是继承 也取消了装饰器:比如现在比较火的decorators不稳定,风险大 取而代之的是function-based, 因为:

  • 支持ts
  • 逻辑复用
  • 代码更容易压缩

谢谢各位大佬的答案😁

@bs32g1038 我也很同意你的观点,现在就这么做了

@Liklei 进阶react了么?2333

Vue3是对ts支持更友好, 而不是只能用ts写

回到顶部