组件化和组件通信

52 阅读1分钟

1、组件名使用大驼峰命名 TitleHeader

2、注册全局组件:很多地方都要使用。(在main.js注册)

image.png

组件中的name是控制调试工具的名字,在注册组件名时,与name保持一致

3、组件之间应该是相互独立不影响的,但是默认组件之间的样式会影响全局,造成样式冲突。要达到独立的效果,只需要在style处加上scoped(scoped会在该组件添加独有的标识)

image.png

4、父传子语法:

父组件通过给子组件(被引入的为子组件 import引入)添加标签属性,子组件用props:[ ]接收

image.png

遍历父传子

image.png

注意:单向数据流。父传给子的数据只能父改,子只能读不能修改

5、子传父语法:

(1)子组件中 this.$emit('自定义事件名',参数)参数可传多个 (2)父组件中 注册对应的事件监听,处理触发事件

image.png

image.png

image.png