Vue组件

1.- 什么是组件？
- 组件是一个html css js img 等的一个聚合体
- 在Vue中使用了一个叫做单文件组件的技术来实现组件
- 它是一个 xxx.vue 文件
- 这个文件在浏览器不能运行，必须经过编译【 gulp webpack 】才能运行

• Vue里面如何实现组件

  • 扩展： Vue.extend()

• 什么是组件化

  • 为了避免多人开发造成的冲突
  • 为了加快开发效率
  • 为了便利更新和维护
  • 组件化： 就是使用具有独立公共的一个整体【 组件 】来进行项目开发的一个趋势 【 流行 】

• Vue中是如何使用组件的？

  • 组件注册：全局注册、局部注册
    • 全局注册
      
  • 局部注册
    

• 组件的起名: 一定要避免和原生标签冲突 举例： Header header
  - 1. 大驼峰 HeadTitle 使用时写法 <head-title></head-title>
  - 2. 小写横杠 head-title 使用时写法 <head-title></head-title>
  - 3. 一个单词 Hello 使用时写法 <hello></hello>或者 <Hello></Hello>【 推荐 】

组件的使用规则

• 具有直接父子级关系的标签，会出现渲染问题，我们通过is属性来解决

 <tr is = "Hello"></tr>

2. 组件通信
   父子组件通信、子父组件通信、非父子组件通信、多组件状态共享。

• 父子组件通信
  - props选项
  
  

  • 子父组件通信
    • 自定义事件 this.$emit
      
      
  • 非父子组件通信
    • ref
    • bus事件总线

• 多组件状态共享

  • Vuex

动态组件

• 动态组件指的是通过 Vue 提供的 component组件 + is 属性来实现
• keep-alive组件实现缓存