组件的介绍

组件

• Vue有两大核心内容
  • 指令
  • 组件
• 什么是组件化？【 为什么要用组件 】
  • 为了避免多人开发造成的冲突
  • 为了加快开发效率
  • 为了便利更新和维护
  • 组件化： 就是使用具有独立公共的一个整体【 组件 】来进行项目开发的一个趋势 【 流行 】
• 什么是组件？
  • 组件是一个html css js img 等的一个聚合体
  • 在Vue中使用了一个叫做单文件组件的技术来实现组件
    • 它是一个 xxx.vue 文件
    • 这个文件在浏览器不能运行，必须经过编译【 gulp webpack 】才能运行
    • 我们学习时，先学组件如何创建和使用，暂时不用
• Vue里面是如何实现组件的？
  • 扩展： Vue.extend()
• Vue中是如何使用组件的？
  • 组件注册
    • 全局注册
    • 局部注册
  • 组件的起名: 一定要避免和原生标签冲突 举例： Header header
    • 1. 大驼峰 HeadTitle 使用
    • 2. 小写横杠 head-title 使用
    • 3. 一个单词 Hello 使用 或者 【 推荐 】

组件通信

• 组件的嵌套
• 组件中数据的定义
• 组件通信 【 实用题 && 面试题 王者 】
  • 父子组件通信
    • props选项
      • Props属性验证
        • props可以是一个对象
        • props中的validator函数
        • props第三方属性验证： vue-validator-help
  • 子父组件通信
    • 自定义事件 this.$emit
  • 非父子组件通信
    • ref
    • bus事件总线
  • 多组件状态共享
    • Vuex

3. 组件的使用规则？

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

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

4. 动态组件

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

5. 扩展： 2.5 slot slot-scope 2.6 v-slot

6. 生命周期

7. 生命周期案例 【 轮播 】