vue3组件事件传递与事件修饰符通信软件前端开发42课件讲解.pptxVIP

《通信软件前端开发》主讲教师：张娇vue3组件事件传递与事件修饰符

图示

搭建第一个父子组件（子组件篇）!--Child.vue--templatedivclass=child-boxh3我是子组件/h3button点我告诉爸爸/button/div/templatestylescoped.child-box{border:2pxsolidgreen;padding:20px;margin:10px;}/style第一步：创建子组件Child.vue

搭建第一个父子组件（父组件篇）!--Parent.vue--scriptsetup//导入子组件importChildfrom./Child.vue/scripttemplatedivclass=parent-boxh2??我是父组件/h2!--使用子组件--Child//div/templatestylescoped.parent-box{border:2pxsolidblue;padding:20px;}/style第二步：在父组件中使用子组件

打破壁垒：事件传递($emit)$emit=发射/触发

事件传递($emit)子组件$emit触发一个自定义事件父组件@事件名监听这个