一文详细聊聊vue3的defineProps、defineEmits和defineExpose
最近在开发中用到了vue3的defineProps、defineEmits和defineExpose，感觉发现新大陆一般，所以利用闲碎时间对这三个方法做个总结。
defineProps
const props = defineProps<{
foo: String,
bar?: Number
}>()
defineProps 是vue3的写法并且是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入；在vue3的非语法糖setup和在vue2中的写法是 props 。
defineProps的大部分用法是进行父子组件传值。
注意：defineProps() 宏中的参数不可以访问
<script setup>中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中。
实例：父组件传值给子组件
父组件通过将值传递给子组件，子组件通过defineProps进行接收，子组件点击后将接收到的值 alert 出来
结果：
defineEmits
const emit = defineEmits<{
(e: 'submit', num: number): void
}>()
defineEmits 和 defineProps 一样也是仅用于 <script setup> ，并且不需要导入；在vue3的非语法糖setup中的写法是 emits 。defineEmits 的不同点在于，组件要触发的事件可以显式地通过 defineEmits() 宏来声明。
注意：如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。
实例：子组件触发父组件的的事件，并且进行传值。
子组件通过触发父组件的 submit 事件，并且将参数6666传递到父组件。
结果：
defineExpose
const isShow = ref<boo(false)
defineExpose({ // 宏来显示指定组件中属性暴露出去
isShow,
});
在使用 <script setup> 的时候，组件的实例是默认关闭的不能够通过模板引用或者$parent 进行被访问的。
通过 defineExpose 可宏来显式指定在
<script setup>组件中要暴露出去的属性。
实例：向外暴露属性，被使用。
组件向外暴露了 isShow 属性值，当被点击时可以被访问到。
结果：
总结
到此这篇关于vue3的defineProps、defineEmits和defineExpose的文章就介绍到这了,更多相关vue3 defineProps、defineEmits和defineExpose内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中如何将日期转换为指定的格式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了详解处理Vue单页面应用SEO的另一种思路，本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍，非常具有实用价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了跟混乱的页面弹窗说再见，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
之前关于vsCode一键生成vue模，最近需要回顾，就顺便发到随笔上了，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
在el-table中的记录列表中放置了一个 操作按钮,点这个按钮时可以新增一个tab页签,并将通过路由传参方式将一些信息传递到新打开的tab页签中,但发现传递中文参数时会出现报错,所以本文给大家介绍了Vue2路由跳转传参中文问题处理方案,需要的朋友可以参考下2024-05-05
el-date-picker日期时间选择器的选择时间限制到分钟级别
文章介绍了如何使用el-date-picker 组件来限制用户选择的时间,禁止选择当前时间的日期及时分,同时允许选择其他日期的全天时分,通过设置 `pickerOptions` 对象的属性,可以实现对日期和时间的精确控制,感兴趣的朋友跟随小编一起看看吧2025-01-01
无论是Vue还是React，都有组件的概念。组件，就是能和别人组合在一起的物件。在前端页面开发过程中，将一个页面划分成一个个小的模块，每个模块单独定义，每个模块就是一个组件。组件可以进行复用，A页面和B页面有一个相似的模块，可以抽离成一个可局部修改的组件。2021-05-05
打开尤大大的GitHub，发现多了个叫 petite-vue 的东西,Vue3 和 Vite 还没学完呢，又开始整新东西了？本文就来介绍一下2021-07-07
这篇文章主要介绍了如何在纯前端环境下使用xlsx-js-style库进行Excel表格文件的下载,并自定义样式,还提到了使用xlsx库进行Excel表格数据的导入,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
本文主要介绍了Element中使用ECharts的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
最新评论