Vue3中props和defineEmit的区别

简介: Vue3中props和defineEmit的区别

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

好在这几天通过公司项目的练手,自己又查阅了一些视频,终于明白了这个方法的基本逻辑。如果你是react转vue,那么本文将对你有很大的帮助;如果你是vue的初学者,也不要害怕,本文尽可能使用“说人话”的角度去解释。

阅读本文的前提条件,你需要对父子组件通讯,靠props来实现这个概念有较好的理解。本文章将对propsemit的区别进行讲解,来让你彻底明白emit到底是个什么东西,篇幅较长,耐心一点,学习知识切忌急功近利。

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

image.png

App组件的结构也非常简单,

image.png

useEmit组件的结构就一个按钮,

image.png

这是整体的页面结构:

image.png

2.这时候提出我们的需求,现在子组件内有一个变量name,需要渲染到父组件内,我们如何处理?(在这里我们不考虑变量提升)

一.通过Props


大致的思路其实很简单,就是父组件提供一个函数,通过props传递给子组件,子组件通过调用这个函数,来将自己的变量给父组件传递过去。

1.我们在App组件内定义一个函数。

image.png

2.思考:这个函数肯定需要一个参数去接收儿子传递过来的信息。ok,当我们拿到以后,我们就去打印一下看看。

image.png

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

image.png

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

这里额外穿插一下知识,在react里传递props,如果是传递变量,就会用{}来表示,字符串就用""

image.png

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

image.png

在子组件身上<button>按钮绑定点击事件为调用这个方法。

image.png

5.回到页面看看效果。

image.png

控制台正确打印出了子组件的变量,下一步就是回到父组件去用变量接收即可。

6.,在App组件定义一个sonNames来接就完事了

image.png

image.png

然后点击按钮可以正常显示。

image.png

二.emit


1.让我们回到父组件 首先我们要搞明白---js原生事件这个名词和vue中提出的理念---自定义事件的区别。

我们在父组件里定义了一个函数

image.png

然后直接在子组件身上绑定这个点击事件

image.png

这个@click其实就是代表着onclick这个原生js里原汁原味的那个鼠标点击事件。

2.那我突然觉得click这几个字母好难看,我不喜欢怎么办?那我可不可以不写click这几个字母,写成myDIY可以吗?我们试一试。

image.png

image.png

页面也好好的,控制台也没报错,vscode里也没报错,好神奇。那么问题来了,这个myDIY事件原生js里没有啊,你也没办法触发啊?什么?你说我点几下不就完事了? 很遗憾,浏览器不认识这个myDIY事件,你说他就是点击事件,那浏览器还觉得它是键盘事件呢。

3.这时候子组件的props里也并没有myDIY这个属性。

image.png

一定要转变自己的观念,这个写法看起来好像是父组件给子组件传递东西,但是并不是。你暂时可以理解为子组件抢了父组件的方法getChildrenName准备拿来自己用(对,没错,我就是这样理解的!一本正经)为什么说准备呢?因为目前为止,你没办法触发这个myDIY事件。

ok,emit来了,这时候我再强调一点,一定一定注意,这不是父组件向子组件传递方法!!!而是子组件准备自给自足

4.回到子组件内,我们使用defineEmits来接收。

image.png

你都学Vue3了,我默认你应该会TS的哦,应该可以看出来什么意思吧?我们正在约束emit函数的类型,emit它是一个函数,它接收的第一个参数就是你自定义的那个事件也就是myDIY,它没有返回值所以就是void

image.png

稍等,我们看一下,好像有错误

image.png

错误是App组件传过来的,我们回过头看看子组件抢过来的函数好像需要一个参数而我们definEmit中好像并没给它传递参数

image.png

接下来返回子组件,给它加上。

image.png

5.ok,然后再给子组件的button绑定上我们刚刚抢过来的那个函数

image.png

6.大功告成,点击按钮也可以正确展示子组件的name

image.png

7.其实感觉有点像Object.prototype.call这方法的味儿了,emit好像就是那个call,改变了父组件定义函数的指向,并且可以传递自己的参数。

总结

1.通过props来给父组件传东西,子组件始终用的都是别人的东西。

2.通过emit,好像这东西就是我的一样!

相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
163 64
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
142 60
|
26天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
99 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
57 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
52 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
58 1
|
2月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
移动开发 JavaScript 小程序
Vue3 与 Vue2 的Props、全局组件的异同点
Vue3 Props Props 是任何现代 JS 框架的重要组成部分。在组件之间传递数据的能力是Vue项目的基本要素。 Vue3 中,在组件中访问Props的方式与 Vue2 会有所不同。
359 0
Vue3 与 Vue2 的Props、全局组件的异同点
|
20天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
110 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。