0208父子组件通信2--emit属性 (1).pptx

组件间通信2--emitVue开发核心技术主讲教师：张莹

emit属性emit实现的是子组件向父组件传递信息parentComponentchildrenComponentpropspass$emitevent

emit属性传值方式1.在子组件的模板标签内使用@click绑定一个系统默认事件，并触发一个方法；2.在子组件的methods中定义子组件模板标签方法，通过this.$emit向父组件中自定义事件发射数据；Vue.property.$emit:3.在父组件中引入子组件占位符，在子组件占位符标签上通过v-on绑定自定义事件，并触发一个父组件真正的方法；4.在父组件的methods中定义子组件标签方法，接收子组件传递的值为默认实参执行该标签方法。

parentComponentchildrenComponentpropspass$emiteventtemplate绑定系统默认事件：触发自定义方法data声明需要传递的私有数据methods实现自定义方法：this.$emit(父组件中自定义事件，需要传递的私有数据)template子组件占位符，绑定自定义事件，触发方法methods实现方法，以子组件私有数据为形参emit属性传值方式

在单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现。所以，每个组件中的样式，都有可能会影响整个index.html页面中的DOM元素。解决css冲突的两种方式cssmodule:将class名进行编码转换c1{color:red}?._1TyUMnubgEBLCDM5y3ayYM{color:red}cssscoped：给标签添加唯一属性,Vue中样式利用属性样式来区分作用域scoped属性解决样式冲突

唯一标识私有化模块化scoped属性解决样式冲突

知识梳理父子组件通信emit属性style标签上的scoped属性解决样式冲突

思考题1.样式冲突问题如果发生在父子组件上，会有什么后果呢？父组件有scoped，子组件没有父组件没有scoped，子组件有scoped父子组件都有scoped2.通过$emit进行子组件数据向父组件数据传递的时候，子组件是如何获取到这些自定义事件的呢？自行搜索$on试试看。

谢谢观看Vue开发核心技术