程序员经验分享-hwhale

第五章 Vue组件化

2023-11-06

5.1 组件的概念

组件（component） 是 Vue.js 最强大的功能之一。
Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。
通常一套系统会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述
例如：项目可能会有头部、底部、页侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

  • 组件就是对局部视图的封装，每个组件包含了：
    HTML 结构
    CSS 样式
    JavaScript 行为:data 数据,methods 行为

  • 提高开发效率，增强可维护性，更好的去解决软件上的高耦合、低内聚、无重用的3大代码问题

  • Vue 中的组件思想借鉴于 React

  • 目前主流的前端框架：Angular、React 、Vue 都是组件化开发思想

5.2 组件的基本使用

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
有两种组件的注册类型：全局注册和局部注册

5.2.1 全局注册

5.2.1.1 介绍

一般把网页中特殊的公共部分注册为全局组件：轮播图、分页、通用导航栏
全局注册之后，可以在任何新创建的 Vue 实例 (new Vue) 的模板中使用
简单格式：
在这里插入图片描述说明：
           组件名：

              - 可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式

              - 但 DOM 中只能使用横线分隔方式进行引用组件
              - 官方强烈推荐组件名字母全小写且必须包含一个连字符

            template：定义组件的视图模板
            data ：在组件中必须是一个函数

5.2.1.2 示例

在这里插入图片描述在这里插入图片描述

5.2.2 局部注册（子组件）

5.2.2.1 介绍

一般把一些非通用部分注册为局部组件，一般只适用于当前项目的
格式：
在这里插入图片描述

5.2.2.2 示例

在这里插入图片描述
在这里插入图片描述

5.2.3 总结

  • 组件是可复用的 Vue 实例，不需要手动实例化
  • 与 new Vue 接收相同的选项，例如 data 、 computed 、 watch 、 methods 等
  • 组件的 data 选项必须是一个函数

5.3 组件化注意事项

  • 组件可以理解为特殊的 Vue 实例，不需要手动实例化，管理自己的 template 模板
  • 组件的 template 必须有且只有一个根节点
  • 组件的 data 选项必须是函数,且函数体返回一个对象
  • 组件与组件之间是相互独立的，可以配置自己的一些选项资源 data、methods、computed 等等
  • 思想：组件自己管理自己，不影响别人

5.4 Vue 父子组件间通信

5.4.1 组件间通信方式

  1. props 父组件向子组件传递数据
  2. $emit 自定义事件
  3. slot 插槽分发内容

5.4.2 组件间通信规则

  1. 不要在子组件中直接修改父组件传递的数据
  2. 数据初始化时，应当看初始化的数据是否用于多个组件中，如果需要被用于多个组件中，则初始化在父组件中；如果只在一个组件中使用，那就初始化在这个要使用的组件中。
  3. 数据初始化在哪个组件, 更新数据的方法(函数)就应该定义在哪个组件。

5.4.3 props 向子组件传递数据

5.4.3.1 声明组件对象中定义 props

  1. 在声明组件对象中使用 props 选项指定
    在这里插入图片描述
    方式1：指定传递属性名，注意是 数组形式
    在这里插入图片描述
    方式2：指定传递属性名和数据类型，注意是 对象形式
    在这里插入图片描述
    方式3：指定属性名、数据类型、必要性、默认值
    在这里插入图片描述

5.4.3.2 引用组件时动态赋值

在引用组件时，通过 v-bind 动态赋值
在这里插入图片描述

5.4.3.3 传递数据注意

  1. props 只用于父组件向子组件传递数据
  2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
  3. 问题:
    a. 如果需要向非子后代传递数据，必须多层逐层传递
    b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

5.4.4 自定义事件

作用：通过 自定义事件 来代替 props 传入函数形式

5.4.4.1 绑定自定义事件

在父组件中定义事件监听函数，并引用子组件标签上 v-on 绑定事件监听。
在这里插入图片描述

5.4.4.2 触发监听事件函数执行

在子组件中触发父组件的监听事件函数调用
在这里插入图片描述

5.4.4.3 自定义事件注意

  1. 自定义事件只用于子组件向父组件发送消息(数据)
  2. 隔代组件或兄弟组件间通信此种方式不合适

5.4.5 slot 插槽

作用: 主要用于父组件向子组件传递 标签+数据 , （而上面prop和自定事件只是传递数据）
场景：一般是某个位置需要经常动态切换显示效果

5.4.5.1 子组件定义插槽

在子组件中定义插槽, 当父组件向指定插槽传递标签数据后, 插槽处就被渲染，否则插槽处不会被渲染.
在这里插入图片描述

5.4.5.2 父组件传递标签数据

在这里插入图片描述

5.4.5.3 插槽注意事项

  1. 只能用于父组件向子组件传递 标签+数据
  2. 传递的插槽标签中的数据处理都需要定义所在父组件中
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Vue笔记

vuejs

javascript

前端

第五章 Vue组件化 的相关文章

随机推荐

  • 华为OD机试 - 叠积木（Java)

    题目描述 有一堆长方体积木 它们的宽度和高度都相同 但长度不一 小橙想把这堆积木叠成一面墙 墙的每层可以放一个积木 也可以将两个积木拼接起来 要求每层的长度相同 若必须用完这些积木 叠成的墙最多为多少层 输入描述 输入为一行 为各个积木的长

  • 如何检测勒索软件攻击

    什么是勒索软件 勒索软件又称勒索病毒 是一种特殊的恶意软件 又被归类为 阻断访问式攻击 denial of access attack 与其他病毒最大的不同在于攻击方法以及中毒方式 攻击方法 攻击它采用技术手段限制受害者访问系统或系统内的数

  • c++ 实现职工管理系统

    一 案例描述 某公司中的职工分为三种 普通员工 经理和老板 每个职工都有自己的职工编号 姓名 年龄 电话号码和岗位 管理系统需要实现的功能如下 添加职工信息 显示职工信息 删除离职职工 修改职工信息 查找职工信息 职工编号排序 清空职工信息

  • git回滚到指定版本，并提交到远程分支

    1 git reflog 可以查看所有分支的所有操作记录包括已经被删除的commit记录和reset的操作 2 git log 可以显示所有提交过的版本信息 二者的区别 用git log 则看不出来被删除的commitid 用git ref

  • cookie session总结

    Cookie是由服务器创建 然后通过响应发送给客户端的一个键值对 客户端会保存Cookie 并会标注出Cookie的来源 哪个服务器的Cookie Cookie规范 Cookie通过请求头和响应头在服务器与客户端之间传输 Cookie大小上

  • 踩坑：git或gitee之上传超过100M文件

    直接说 如果你是免费用户 g远程仓库是gitee 那么对不起 你没法上传超过100M的大文件 不支持git fls 只有企业项目 才支持 如果你的远程仓库是git 那么借助git fls就可以了 至于怎么使用 网上一大堆博客 我就不浪费篇幅

  • hive 使用 jndi 数据源时已经在 Tomcat 中配置好 但是在 java 代码中获取数据源就会报错

    这个是异常信息 javax naming NoInitialContextException Need to specify class name in environment or system property or as an app

  • kafka系统的架构

    系统的架构 主题topic和分区partition topic Kafka中存储数据的逻辑分类 你可以理解为数据库中 表 的概念 比如 将app端日志 微信小程序端日志 业务库订单表数据分别放入不同的topic partition分区 提升

  • 数值分析 第一章：绪论

    第一章 绪论 1 2误差基础知识 1 2 1误差来源 1 2 2误差度量 1 2 3初值误差传播 1 3 舍入误差分析及数值稳定性 1 2误差基础知识 1 2 1误差来源 数学模型与实际问题的差异称为模型误差 数学模型中常常还包含有一些参数

  • 一起学SF框架系列附-Springframework源码学习总结

    学习过程 学习Springframework6 0 8 前后将近4个月终于结束了 学习主要内容如图 红框 本次学习主要针对核心模块 Beans Context Core SpEL 完全独立于框架的 没深入学习 AOP 以SF应用的初始化过程

  • nginx开启gzip压缩功能遇到的坑

    nginx开启gzip压缩功能一大堆 网上大多数配置如下 server listen 8080 proxy http version 1 1 gzip on gzip min length 1k gzip buffers 4 16k gzi

  • tf.reduce_sum tensorflow维度上的操作

    tensorflow中有很多在维度上的操作 本例以常用的tf reduce sum进行说明 官方给的api reduce sum input tensor axis None keep dims False name None reduct

  • 闲谈IPv6-IPv6地址的scope到底是什么？

    周日 大早上六点多和疯子去菜市场买了菜 顺便打了一壶糯米烧酒 回来把我的正则安哥哄睡了之后 继续思考IPv6的细节 一台主机启动后 每一块网卡都会自动生成一个fe80打头的 链路本地地址 这个地址在Linux上你删都删不掉 不信你试试 在W

  • Notepad++找回未保存的文件（缓存）

    Notepad 找回未保存的文件 缓存 就吃晚饭的功夫 电脑重启了 然鹅我在Notepad 里面写的东西还没保存 当场石化 还好挽救回来了 以后一定要记得Ctrl S 参考链接 Notepad 找回自动保存缓存内容的文件

  • 小米画报的壁纸怎么保存_小米怎么保存不生虫？掌握方法，安心存放随时吃，方法简单很实用...

    小米在古时被称为 粟 它营养丰富 味道清香 是传统的健康食品 在北方 小米粥配鸡蛋 红糖历来都是补充营养 滋补身体的佳品 在过去 小米是作为主食食用的 现在我们一般会用小米熬粥来调剂饮食 不会天天食用 那么 我们平时如何储存才能让小米干净卫

  • 对象的内存布局

    Hotspot虚拟机中 对象在内存中存储的布局可以分为三块区域 对象头 Header 实例数据 Instance Data 对齐填充 Padding 对象头 比如hash码 对象所属的年代 对象锁 锁状态标识 偏向锁线程ID 偏向时间 数组

  • wireshark display reference: https://www.wireshark.org/docs/dfref/

    2019独角兽企业重金招聘Python工程师标准 gt gt gt Display Filter Reference Wireshark s most powerful feature is its vast array of displa

  • Kruise Rollout：基于 Lua 脚本的可扩展流量调度方案

    前言 Kruise Rollout 1 是 OpenKruise 社区开源的渐进式交付框架 Kruise Rollout 支持配合流量和实例灰度的金丝雀发布 蓝绿发布 A B Testing 发布 以及发布过程能够基于 Prometheus

  • unable to access ‘https://gitee.com/XXX.git/‘: Failed to connect to 127.0.0.1port 7890: Connection r

    问题 在gitee拉取代码时 出现 unable to access https gitee com XXX git Failed to connect to 127 0 0 1port 7890 Connection refused的错误

  • 第五章 Vue组件化

    5 1 组件的概念 组件 component 是 Vue js 最强大的功能之一 Vue 中的组件化开发就是把网页的重复代码抽取出来 封装成一个个可复用的视图组件 然后将这些视图组件拼接到一块就构成了一个完整的系统 这种方式非常灵活 可以极

热门标签