vue3:setup的两个注意点详解

更新时间：2021年10月09日 15:02:35 作者：公孙元二

这篇文章主要介绍了vue3.0中setup的两个注意点，本文通过两种用法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

在vue2中

父组件传属性给子组件

在这里插入图片描述

子组件接收属性

在这里插入图片描述

如果没有接收，则需要在$attrs里才能收到，缺点是没有对类型作限制，以及使用的时候名字比较长

在这里插入图片描述

使用的时候名字比较长

在这里插入图片描述

vue2，父组件在子组件里使用插槽

在这里插入图片描述

打印插槽里的内容

在这里插入图片描述

如果父组件使用了子组件2个插槽

在这里插入图片描述

父组件在子组件使用具名插槽

在这里插入图片描述

在vue3中

setup的注意点

在这里插入图片描述

setup生命周期在beforecreated之前

在这里插入图片描述

setup可以拿到两个参数，props和context

给子组件传2个属性

在这里插入图片描述

打印context

在这里插入图片描述

context.attrs

与vue2类似，如果只声明部分，则剩下的在attrs属性里面

在这里插入图片描述

context.emit

给子组件添加监听事件

在这里插入图片描述

context.slot

在这里插入图片描述

如果传一个具名插槽

在这里插入图片描述

或者(推荐这种)

在这里插入图片描述

打印

在这里插入图片描述

如果传2个具名插槽

在这里插入图片描述

总结

在这里插入图片描述

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

Vue如何实现利用vuex永久储存数据
这篇文章主要介绍了Vue如何实现利用vuex永久储存数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vuex入门教程,图文+实例解析
这篇文章主要介绍了vuex入门教程，图文+实例解析，具有很好的参考价值，希望对大家有所帮助。
2022-03-03
用vue写一个日历
这篇文章主要介绍了如何利用vue写一个日历，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-11-11
vue组件传值的11种方式总结
这篇文章主要介绍了vue组件传值的11种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue3+element-plus props中的变量使用 v-model 报错及解决方案
这篇文章主要介绍了vue3+element-plus props中的变量使用 v-model 报错及解决方案,prop 是单向数据流,这里只能用:model-value,不能用v-model,本文给大家介绍的非常详细,需要的朋友可以参考下
2023-10-10
Vue开发实现滑动验证组件
这篇文章主要为大家详细介绍了如何利用Vue开发实现简单的滑动验证组件，并且适配移动和PC，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-07-07
vue.js表格组件开发的实例详解
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，所以本文将从各方面对Vue.js的组件开发做一个深入介绍。有需要的朋友们可以参考借鉴。
2016-10-10
完美解决element-ui的el-input设置number类型后的相关问题
这篇文章主要介绍了完美解决element-ui的el-input设置number类型后的相关问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
在Vue中使用this.$store或者是$route一直报错的解决
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
关于vue2使用swiper4的踩坑记录
最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
2022-01-01