当前位置： 首页 > news >正文

Vue基础入门讲义（四）-组件化

news 2025/7/6 10:02:24

在这里插入图片描述

文章目录

    • 1.引言
    • 2.定义全局组件
    • 3.组件的复用
    • 4.局部注册
    • 5.组件通信
      • 5.1.父向子传递props
      • 5.2.传递复杂数据
      • 5.3.子向父的通信

1.引言

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

2.定义全局组件

通过Vue的component方法来定义一个全局组件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body><div id="app"><!--使用定义好的全局组件--><counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">//定义组件const counter = {template: "<button @click='num++'>你点击了{{num}}次；我记住了</button>",data() {return {num: 0}}};//全局注册组件；参数1：组件名称，参数2：组件Vue.component("counter", counter);var app = new Vue({el: "#app"});</script>
</body>
</html>
  • 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
  • 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
  • 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
  • data的定义方式比较特殊，必须是一个函数。

效果：
在这里插入图片描述

3.组件的复用

定义好的组件，可以任意复用多次：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body><div id="app"><!--使用定义好的全局组件--><counter></counter><counter></counter><counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">//定义组件const counter = {template: "<button @click='num++'>你点击了{{num}}次；我记住了</button>",data() {return {num: 0}}};//全局注册组件；参数1：组件名称，参数2：组件Vue.component("counter", counter);var app = new Vue({el: "#app"});</script>
</body>
</html>

在这里插入图片描述
你会发现每个组件互不干扰，都有自己的num值。怎么实现的？

组件的data属性必须是函数！

当定义这个 <counter> 组件时，它的data 并不是像这样直接提供一个对象：

data: {num: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {return {num: 0}
}

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

4.局部注册

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，会采用局部注册。

在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

然后在Vue中使用它：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body>
<div id="app"><!--使用定义好的全局组件--><counter></counter><counter></counter><counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>//定义组件const counter = {template: "<button @click='num++'>你点击了{{num}}次；我记住了</button>",data() {return {num: 0}}};//全局注册组件；参数1：组件名称，参数2：组件//Vue.component("counter", counter);var app = new Vue({el: "#app",//局部注册组件components: {counter: counter}});
</script>
</body>
</html>

  • components就是当前vue对象子组件集合。

    • 其key就是子组件名称
    • 其值就是组件对象的属性

  • 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

5.组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述

  • 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
  • 左侧内容区又分为上下两个组件
  • 右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

5.1.父向子传递props

比如有一个子组件：

	Vue.component("introduce",{// 直接使用props接收到的属性来渲染页面template:'<h3>{{title}}</h3>',props:[title] // 通过props来接收一个父组件传递的属性
})
  • 这个子组件中要使用title属性渲染页面，但是自己并没有title属性
  • 通过props来接收父组件属性，名为title

父组件使用子组件，同时传递title属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body>
<div id="app"><!--使用定义好的全局组件--><introduce :title="msg"></introduce>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>//定义组件const introduce = {//使用props属性title的值渲染模版template: "<h2>{{title}}</h2>",//定义接收来自父组件的属性props: ["title"]};//全局注册组件；参数1：组件名称，参数2：组件Vue.component("introduce", introduce);var app = new Vue({el: "#app",data: {msg: "父组件中的msg属性的内容"}});
</script>
</body>
</html>

效果：

在这里插入图片描述

5.2.传递复杂数据

定义一个子组件：

    const myList = {template: '\<ul>\<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\</ul>\',props: { // 通过props来接收父组件传递来的属性items: {// 这里定义items属性type: Array,// 要求必须是Array类型default: [] // 如果父组件没有传，那么给定默认值是[]}}};
  • 这个子组件可以对 items 进行迭代，并输出到页面。
  • 但是组件中并未定义items属性。
  • 通过props来定义需要从父组件中接收的属性
    • items：是要接收的属性名称
      • type：限定父组件传递来的必须是数组，否则报错；type的值可以是Array或者Object（传递对象的
        时候使用）
      • default：默认值，
default，如果是对象则需要写成方法的方式返回默认值。如：
default(){return {"xxx":"默认值"};
}

页面内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body>
<div id="app"><h2>学习的课程有：</h2><!-- 接受来自父组件的属性值，使用v-bind指向父组件的属性lessons；注意使用my-list --><my-list :items="lessons"></my-list>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>//定义组件const myList = {//可以使用双引号、单引号或者如下使用的 ` 飘号template: `<ul><li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li></ul>`,//定义接收来自父组件的属性props: {//定义模版中使用的属性items: {//必须为数组类型type: Array,//默认为空数组default: []}}};var app = new Vue({el: "#app",data: {msg: "父组件中的msg属性的内容",lessons: [{"id": 1, "name": "Java"},{"id": 2, "name": "PHP"},{"id": 3, "name": "前端"}]},//注册组件components: {//如果组件key和value一致可以简写如下myList}});
</script>
</body>
</html>

效果：
在这里插入图片描述

5.3.子向父的通信

来看这样的一个案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body>
<div id="app"><h2>num = {{num}}</h2><!--使用定义好的全局组件--><counter :snum="num"></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>//定义组件const counter = {//组件只能是一个元素里面包裹其他元素；如下面，一个div包含两个按钮template: `<div><button @click="snum++">+</button><button @click="snum--">-</button></div>`,props: ["snum"]};//全局注册组件；参数1：组件名称，参数2：组件Vue.component("counter", counter);var app = new Vue({el: "#app",data: {num: 0}});
</script>
</body>
</html>
  • 子组件接收父组件的num属性
  • 子组件定义点击按钮，点击后对num进行加或减操作

尝试运行，好像没问题，点击按钮试试：
在这里插入图片描述
子组件接收到父组件属性后，默认是不允许修改的。怎么办？
既然只有父组件能修改，那么加和减的操作一定是放在父组件：

var app = new Vue({el: "#app",data: {num: 0},methods: {//父组件中定义操作num的方法numPlus() {this.num++;},numReduce() {this.num--;}}});

但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
可以通过v-on指令将父组件的函数绑定到子组件上：

<div id="app"><h2>num = {{num}}</h2><!--使用定义好的全局组件--><counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>

然后，当子组件中按钮被点击时，调用绑定的函数：

//定义组件const counter = {//组件只能是一个元素里面包裹其他元素；如下面，一个div包含两个按钮template: `<div><button @click="incrNum">+</button><button @click="decrNum">-</button></div>`,props: ["snum"],methods: {//点击模板中使用的方法incrNum() {return this.$emit("plus");},decrNum() {return this.$emit("reduce");}}};

完成页面如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuejs测试</title>
</head>
<body>
<div id="app"><h2>num = {{num}}</h2><!--使用定义好的全局组件--><counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>//定义组件const counter = {
//组件只能是一个元素里面包裹其他元素；如下面，一个div包含两个按钮template: `
<div>
<button @click="incrNum">+</button>
<button @click="decrNum">-</button>
</div>
`,props: ["snum"],methods: {
//点击模板中使用的方法incrNum() {return this.$emit("plus");},decrNum() {return this.$emit("reduce");}}};//全局注册组件；参数1：组件名称，参数2：组件Vue.component("counter", counter);var app = new Vue({el: "#app",data: {num: 0},methods: {
//父组件中定义操作num的方法numPlus() {this.num++;},numReduce() {this.num--;}}});
</script>
</body>
</html>
  • vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数

效果：
在这里插入图片描述
子组件不能直接修改父组件传递参数的引用或者基本类型参数值。

相关文章：

Vue基础入门讲义（四）-组件化

文章目录1.引言2.定义全局组件3.组件的复用4.局部注册5.组件通信5.1.父向子传递props5.2.传递复杂数据5.3.子向父的通信1.引言 在大型应用开发的时候&#xff0c;页面可以划分成很多部分。往往不同的页面&#xff0c;也会有相同的部分。例如可能会有相同的头部导航。 但是如果…...

编程日记 2023/5/26 19:40:24

Android onLayout布局流程解析

组件布局流程结论 1.&#xff09;layout流程始于ViewRootImpl的performLayout()方法&#xff0c;该方法会调用根View&#xff08;DecorView&#xff09;的layout()方法进行布局&#xff0c;因为DecorView是ViewGroup(FrameLayout),所以layout流程来到了ViewGroup&#xff08;其…...

编程日记 2023/5/26 19:40:22

浅分析BIG-建筑展示系统

一、主页&#xff08;主要界面&#xff09;重点疑点&#xff08;需要解决&#xff09;1.云平台实时同步。是否可以电脑与hololens2同步或链接&#xff1f;并可以传输信息提醒&#xff1f;一级界面&#xff08;启动界面&#xff09;1.交互式启动激活效果&#xff08;触发按钮旋转…...

编程日记 2023/5/26 19:40:20

模电基础（1） 半导体基础知识

基本内容&#xff1a; 1.本征半导体的基本介绍结构&#xff1b; 2.杂质半导体&#xff1b; 3.PN结的形成&#xff1b; 4.PN结的性质。 1.本征半导体 半导体&#xff1a;导电性能介于绝缘体和导体之间的物质。 本征半导体是纯净的晶体结构的半导体。 纯净→无杂质晶体结构→稳…...

编程日记 2023/5/27 3:30:34

阅读笔记：TF - IDF 原理

今天查阅 TF-IDF 资料&#xff0c;发现百度百科里面提供了一个例子&#xff0c;解释的很清楚&#xff0c;记下来备用。 原文链接&#xff1a;https://baike.baidu.com/item/tf-idf/8816134?fraladdin 例子&#xff1a;在某个一共有一千词的网页中 “原子能”、“的” 和 “应…...

编程日记 2023/5/26 19:40:19

【C语言】float 关键字

&#x1f6a9;write in front&#x1f6a9; &#x1f50e;大家好&#xff0c;我是謓泽&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f3c5;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4…...

编程日记 2023/5/26 19:40:17

Linux 网络编程(实现多路IO转接服务器)

1.select函数实现多路IO转接服务器select函数原型&#xff1a;包含在头文件<sys/time.h>&#xff0c;<sys/types.h>和<unistd.h>int select(int nfds, fd_set *readfds, fd_set *writefds,fd_set *exceptfds, struct timeval *timeout);作用&#xff1a;确定…...

编程日记 2023/5/26 19:40:16

DC-4 靶场学习

信息搜集&#xff1a; 首先获取靶场ip&#xff0c;和之前一样。 arp-scan -l nmap -sP 192.168.28.0/24然后访问。 发现需要登录。 漏洞分析: 直接用bp爆破&#xff0c;爆破出来密码为happy&#xff0c;登录。 发现执行了命令&#xff0c;抓包。 修改命令可以执行&#xff…...

编程日记 2023/5/26 19:40:14

QML组件

一个QML文件定义了一个独立的、顶级的QML组件。 一个QML组件就是一个模板&#xff0c;被QML运行环境解释来创建一个带有一些预定义行为的对象。 一个独立的QML组件可以运行多次来禅城多个对象&#xff0c;每个对象都可以称为该组件的实例。 例子&#xff1a; 在项目中添加一…...

编程日记 2023/5/25 18:55:16

canvas 学习指南

canvas 学习指南 创建一个 canvas <! DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"><head><title></title><meta charset"utf-8" /><script type"text/javascript">window.onload fun…...

编程日记 2023/5/25 16:22:29

【华为OD机试2023】开心消消乐 C++

【华为OD机试2023】开心消消乐 C++ 前言 如果您在准备华为的面试，期间有想了解的可以私信我，我会尽可能帮您解答，也可以给您一些建议！ 本文解法非最优解（即非性能最优），不能保证通过率。 Tips1：机试为ACM 模式 你的代码需要处理输入输出，input/cin接收输入、print/cou…...

编程日记 2023/5/26 19:40:12

学历？能力？

一个面试官愿意看一张有形的总结报告&#xff0c;还是愿意相信看不到的人品&#xff1f;...

编程日记 2023/5/26 19:40:11

使用ECharts打造一个数据可视化面板

使用ECharts打造一个数据可视化面板1. 使用技术2. 案例适配方案3. 基础设置4. header 布局5. mainbox 主体模块6. 公共面板模块 panel7. 柱形图 bar 模块&#xff08;布局&#xff09;8. 中间布局9. ECharts 介绍10. ECharts 体验11. ECharts 基础配置12. 柱状图图表&#xff0…...

编程日记 2023/5/26 19:40:09

【论文简述】PVSNet: Pixelwise Visibility-Aware Multi-ViewStereo Network（arxiv 2020）

一、论文简述 1. 第一作者&#xff1a;Qingshan Xu 2. 发表年份&#xff1a;2020 3. 发表期刊&#xff1a;arxiv 4. 关键词&#xff1a;MVS、3D重建、可见性、代价体、训练策略 5. 探索动机&#xff1a;ETH3D基准测试提供的图像包含强烈的视图变化&#xff0c;这就要求MVS…...

编程日记 2023/5/26 19:40:07

CSS隐藏元素的几种方式以及display、visibility、opacity的区别

CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了display:none设置元素不可见并且连盒模型也不生成&#xff0c;一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型&#xff0c;当其值为“none”时可以规定元素不生成…...

编程日记 2023/5/26 19:40:06

【Java|golang】1487. 保证文件名唯一---golang中string方法的坑

给你一个长度为 n 的字符串数组 names 。你将会在文件系统中创建 n 个文件夹&#xff1a;在第 i 分钟&#xff0c;新建名为 names[i] 的文件夹。 由于两个文件 不能 共享相同的文件名&#xff0c;因此如果新建文件夹使用的文件名已经被占用&#xff0c;系统会以 (k) 的形式为新…...

编程日记 2023/5/26 19:40:04

flstudio21水果language选项中文设置方法教程

编曲是通过DAW&#xff08;数字音频工作站软件&#xff09;完成的&#xff0c;也就是我们常说的宿主软件。现在有很多优秀的宿主软件&#xff0c;例如Cubase、Studio One、FL Studio等。 FL Studio是一款功能强大的音乐制作软件&#xff0c;也被称为FruityLoops。目前已经推出…...

编程日记 2023/5/26 19:40:02

Ubuntu中安装StaMPS

Ubuntu中安装StaMPS0 StaMPS简介1 首先安装好MATLAB&#xff0c;安装一些依赖工具包2 安装StaMPS2.1 下载StaMPS安装包2.2 安装2.3 配置环境2.4 matlab中的路径设置0 StaMPS简介 官网&#xff1a;https://homepages.see.leeds.ac.uk/~earahoo/stamps/ A software package to e…...

编程日记 2023/5/26 19:40:00

Spring Security 实现自定义登录和认证（1）

1 SpringSecurity 1.1 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>1.2 编写配置类 在spring最新版中禁用了WebSecurityConfigurerAdapter…...

编程日记 2023/5/26 19:39:59

Linux 进程：辨析wait与waitpid

目录一、wait二、waitpid(1)参数&#xff1a;pid(2)参数&#xff1a;status(3)参数&#xff1a;options(4)返回值wait 与 waitpid 这两个函数的作用是&#xff1a;等待子进程退出&#xff0c;在子进程退出后释放子进程资源&#xff0c;防止子进程变成僵尸进程。但准确的说&…...

编程日记 2023/5/26 19:39:57

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/6/16 12:49:42

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/7/5 5:39:52

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/7/4 19:33:23

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/7/6 5:55:01

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/7/5 3:31:34

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/6/15 9:27:43

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/7/5 3:23:12