组件的介绍

本文深入探讨Vue.js中的组件化开发,讲解组件的概念、创建及使用方式,包括单文件组件、组件注册、组件通信等核心内容,帮助开发者提升项目开发效率与维护便利性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件

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

组件通信

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

    • 具有直接父子级关系的标签,会出现渲染问题,我们通过is属性来解决
     <tr is = "Hello"></tr>
    
  2. 动态组件

    • 动态组件指的是通过 Vue 提供的 component组件 + is 属性来实现
    • keep-alive组件实现缓存
  3. 扩展: 2.5 slot slot-scope 2.6 v-slot

  4. 生命周期

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值