vue组件化开发---新手学习
vue组件化开发
1.组件化开发思想
- 组件化规范:Web Components
- 此方法并没有完全解决,还存在兼容性的问题
官网:https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
- 此方法并没有完全解决,还存在兼容性的问题
2.注册组件
- 全局注册
3.组件注册注意事项
- data必须是一个函数
- 组件模板内容必须有且只有一个根元素
- 组件模板内容可以是模板字符串
4.组件命名方式
- 短横线方式
- 驼峰式命名
**注意:**如果使用驼峰式命名组件,那么在使用组件时,只能在字符串模板中用驼峰的方式使用组件,在普通的标签模板中,必须使用短横线的方式使用组件
5.局部组件注册
6.父组件向子组件传值
-
组件内部通过props接收传递过来的值
- props传递数据原则:单向数据流(只允许父传向子,避免逻辑复杂)
-
父组件通过属性将值传递给子组件
-
props属性名规则
- 在props中使用驼峰形式,模板中需要使用短横线的形式
- 字符串形式的模板中没有这个限制
7.子组件向父组件传值
- 子组件通过自定义事件向父组件传递信息
- 父组件监听子组件的事件
8.非父子组件间传值
- 单独的事件中心管理组件间的通信
- 监听事件与销毁事件
- 触发事件
9.组件插槽
10.具名插槽
11.作用域插槽
注意: slot-scope 已弃用,改为v-slot