首页IT科技vue组件通信原理(五、vue3.0之组件通信详解(defineProps、defineEmits、defineExpose))

vue组件通信原理(五、vue3.0之组件通信详解(defineProps、defineEmits、defineExpose))

时间2025-09-19 13:28:55分类IT科技浏览5279
导读:我们在做vue项目中,我们总会遇到组件引入,在嵌套组件中我们的父级组件中引入子级组件中的值,或者在子组件中我们使用父组件中的值。那么当我们遇到这样的场景我们应该怎么做,在vue2.0中,我们使用props和emit进行父子之间的通信,兄弟之间用事件中央总线(event bus ;在vue3.2的语法中我们则使用defineProp...

我们在做vue项目中                ,我们总会遇到组件引入                          ,在嵌套组件中我们的父级组件中引入子级组件中的值        ,或者在子组件中我们使用父组件中的值                。那么当我们遇到这样的场景我们应该怎么做            ,在vue2.0中                          ,我们使用props和emit进行父子之间的通信             ,兄弟之间用事件中央总线(event bus);在vue3.2的语法中我们则使用defineProps和defineEmits来声明props和emit        ,用其进行组件之间的传值                         ,那么接下来                  ,我们来看看                          。

defineProps:

1                  、用于组件通信中父级组件给子级组件传值    ,其用来声明props,其接收值为props选项相同的值

2                        、默认支持常见的类型检查                        ,在ts下                      ,我们需要明确变量的类型,类型经常是我们的自定义类型

3        、只能在<script setup>中使用

4              、不需要被导入即可使用,它会在编译<script setup>语法块时一同编译掉

5                         、必须在<script setup>的顶层使用                    ,不可以在<script setup>的局部变量中引用

6            、不可以访问 <script setup> 中定义的其他变量                          ,因为在编译时整个表达式都会被移到外部的函数中

/ 父级组件使用自定义属性向下传递值 <div class="home"> <HelloWorld :msg="msg"/> </div> <script setup> import HelloWorld from @/components/HelloWorld /** * 父级组件

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
织梦如何给栏目增加缩略图(dedecms织梦调用图集的第一张图片的方法) 百度官方优化指南(百度官网优化)