首页 前端知识 vue2和vue3 父子组件传值

vue2和vue3 父子组件传值

2024-08-25 23:08:58 前端知识 前端哥 752 562 我要收藏

1.vue2父传子

创建父子组件
在这里插入图片描述


父组件内代码:
在这里插入图片描述


子组件的代码:
在这里插入图片描述


效果图:
在这里插入图片描述


vue2父传子总结:

总的来说就是在父组件的子标签写一个自定义事件,在子组件用props接收


2.vue2子传父

子组件内代码:
在这里插入图片描述


父组件内代码:
在这里插入图片描述


效果图
在这里插入图片描述


vue2子传父总结:

子组件传值需要事件触发,通过$emit传递参数,在父组件中的子组件标签里自定义一个事件,在父组件的methods中写该事件函数目的是接收子组件的传参,在子组件里的created生命周期里通过$emit方法传参第 一个参数是自定义事件的名字第二个参数是传的值


3.vue3父传子

父组件内代码:
在这里插入图片描述


子组件内代码:
请添加图片描述


效果图
在这里插入图片描述


vue3父传子总结:
根据上面的代码可以看出来,vue2和vue3的父传子并没有太大改变,只不过在子组件接收值的时候props改成了defineProps来接收


4.vue3子传父

子组件内代码:
在这里插入图片描述


父组件内代码:
在这里插入图片描述


效果图
在这里插入图片描述


vue3子传父总结:
像vue2中子传父那样,子组件通过emit发送,父组件通过自定义事件接收。,vue3子组件中通过defineEmits方法发送,父组件通过自定义事件接收

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16847.html
标签
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!