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