Vue3中props和defineEmit的区别

由于之前写的项目都是基于react来开发和思考的,转到vue中从来未接触过emit这个概念,官方的文档写的也不是特别清楚,(也或许是我的思想还尚未从react的编程理念中转出来)查阅了很多作者关于emit的解释,但从他们的回答中也并不能理解的特别透彻。

好在这几天通过公司项目的练手,自己又查阅了一些视频,终于明白了这个方法的基本逻辑。如果你是react转vue,那么本文将对你有很大的帮助;如果你是vue的初学者,也不要害怕,本文尽可能使用“说人话”的角度去解释。
阅读本文的前提条件,你需要对父子组件通讯,靠props来实现这个概念有较好的理解。本文章将对propsemit的区别进行讲解,来让你彻底明白emit到底是个什么东西,篇幅较长,耐心一点,学习知识切忌急功近利。


1.在这里我们准备一个App组件作为父组件和一个useEmit.vue文件作为子组件。(其他文件不需要看,都是我之前练习使用的。)
Vue3中props和defineEmit的区别
文章图片

App组件的结构也非常简单,
Vue3中props和defineEmit的区别
文章图片

useEmit组件的结构就一个按钮,
Vue3中props和defineEmit的区别
文章图片

这是整体的页面结构:
Vue3中props和defineEmit的区别
文章图片

2.这时候提出我们的需求,现在子组件内有一个变量name,需要渲染到父组件内,我们如何处理?(在这里我们不考虑变量提升)
一.通过Props 大致的思路其实很简单,就是父组件提供一个函数,通过props传递给子组件,子组件通过调用这个函数,来将自己的变量给父组件传递过去。
1.我们在App组件内定义一个函数。
Vue3中props和defineEmit的区别
文章图片

2.思考:这个函数肯定需要一个参数去接收儿子传递过来的信息。ok,当我们拿到以后,我们就去打印一下看看。
Vue3中props和defineEmit的区别
文章图片

3.接下来就是传递给子组件,在自组件去调用就行。vue里需要注意,传递变量的时候需要在属性前面加:,来告诉vue我后面双引号里传递的是一个变量。
Vue3中props和defineEmit的区别
文章图片

注意:这里和react不一样的地方在于,也是我认为设计不好的一个地方,由于vue使用双引号的地方很多,非常容易让人产生疑惑,刚开始看公司代码的时候,由于那时候不知道vue的设计理念,经常不知道到底这个东西是字符串还是变量


这里额外穿插一下知识,在react里传递props,如果是传递变量,就会用{}来表示,字符串就用""
Vue3中props和defineEmit的区别
文章图片



4.子组件就得去接收这个方法,回到子组件。这里通过vue3的definProps去拿,并且定义好要传给父组件的变量name。不清楚这个方法的可以看我上一篇文章。
Vue3中props和defineEmit的区别
文章图片

在子组件身上