Nuxt CNode：Node.js专业中文社区

vue3.x @emit触发事件，如何保证执行顺序

发布于 6 年前作者 Rabbitzzc 8636 次预览最后一次回复是 6 年前来自问答

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 回复

希望解答一下，谢谢🙂🙂

这个问题真的没人解答嘛

不会

🙄help

vue3.0还没出，你这是vue2.x的ts写法
没用过ts写vue，你试试这样可不可以

	@Emit('hello')
    hello() {};
	
	sayWorld(){
	  console.log('hi');
	  this.hello();
	  console.log('world');
	}

Rabbitzzc

6楼•6 年前

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

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

kgdfj

7楼•6 年前

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

xjh22222228

8楼•6 年前

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

bs32g1038

9楼•6 年前

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

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

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

Rabbitzzc

10楼•6 年前

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

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

v3 不会有 class api。

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

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

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

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

谢谢各位大佬的答案😁

Liklei

14楼•6 年前

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

Rabbitzzc

15楼•6 年前

@Liklei 进阶react了么？2333

lincenying

16楼•6 年前

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