第11天 | 14天搞定Vue3.0，自定义组件
ztj100 2024-10-27 18:35 12 浏览 0 评论
在一个页面中，如果有代码重复的内容，那你可以将其抽出来，用Vue注册成局部组件；在一个Web系统中，如果有多个页面有共同的代码，那你可以将其抽出来，用Vue注册成全局组件。
组件可以扩展 HTML元素，封装可重用的代码。让我们可以用独立可复用的小组件来构建大型应用。其实，不用组件也可以，只是复制粘贴多了，键盘容易坏(这里瞎说的，别当真)。
其实，如果你用第3方现成的组件库的话，自定义组件，用得很少，甚至不用，我这边就很少用，但这是一个知识点，你还是学一下比较好。
11.1 局部注册
在一个页面中，将其重复的内容抽出来，注册成组件，比如我想在一个页面中，多次出现介绍老陈的情况，我就将其注册成组件<laochen>。在需要用的地方直接引进<laochen></laochen>这个组件即可，以此来达到复用的目标。其实我用老陈做组件，就是为了寻找存在感。哈哈~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0组件注册</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
<laochen></laochen>
好多内容啊.........<br/>
<laochen></laochen>
</div>
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为laochen的新页面组件
app.component('laochen', {
data() {
return {
lang: "Vue3.0"
}
},
template: `<span style="color: darkgreen">
老陈说编程：{{ lang }}</span><br/>`
})
app.mount('#app')
</script>
</body>
</html>输出结果
11.2 全局注册
如果在整个Web系统中，有重复代码存在的话，那可以将共同的内容，放到一个js文件中。之后，在需要用到的页面进行引进即可。
自己新建一个c.js文件并在里面敲入如下内容。如果你不叫老陈，那你可以改成老王，老刘，老李，老林，老油条......，你喜欢就好。
const ComponentA = {
template: `<span style="color: darkgreen">老陈说编程：</span>
<p>
一个当了10年技术总监的老家伙，分享多年的编程经验。<br/>
想学编程的朋友，可关注今日头条：老陈说编程。<br/>
我在分享Python，前端、Java和App方面的干货。关注我，没错的。
</p>`
}html页面文件内容，注意引进c.js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0组件注册</title>
<script src="vue.global.js"></script>
<script src="c.js"></script>
</head>
<body>
<div id="app">
<laochen></laochen>
<hr style="background-color:green;height: 1px"/>
<laochen></laochen>
</div>
<script>
const app = Vue.createApp({
components: {
'laochen': ComponentA
}
})
app.mount('#app')
</script>
</body>
</html>输出结果
好了，有关Vue3.0自定义组件的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。
相关推荐
- MySQL的10种常用数据类型（列举mysql中常见的数据类型）
-
MySQL的数据类型常用的数据类型有：整型（xxxint）位类型(bit)...
- 大数据量惯用优化方法（大数据 量化）
-
优化人员工作时免不了要接触到大数据量的问题，下面就将平时收集的一些关于大数据量的优化方法整理记录一下，也是和大家一起共享哦。1.应尽量避免在where子句中对字段进行null值判断，否则将导致...
- MYSQL有哪些数据类型（mysql数据类型主要包括）
-
整理下以便查阅，还想吐槽下：这头条怎么就不能给文章分类呢？整数类型...
- Qt实现表格树控件-自绘树节点虚线
-
一、开心一刻...
- 如何在Qt中实现图形打印?（小学一年级数学图形图片打印）
-
在Qt中，可以使用QPrinter类和QPainter类来实现图形的打印功能。以下是一个简单的示例，演示了如何在Qt中进行图形的打印：...
- Qt组件库之桌面图标系统实现（qt组件库之桌面图标系统实现了）
-
先来看看实现效果之前效果都放在最后，是不是大家不看到最后就走了，￣□￣｜｜，所以打算以后就先放效果在写实现方法。...
- QT实现抖动文字和滚动文字，附源码
-
前言不知道大家有没有发现今天的文章有什么不一样，哈哈，我自己胡拼乱凑弄了一个logo，好不好看就先不说了，最起码萌萌哒...当然这不是今天的重点，在做logo的时候，我原本想让文字动起来的，奈何技术有...
- Qt 图形(QPainterPath)（qt图形界面教程）
-
简述QPainterPath类提供了一个容器，用于绘图操作，可以创建和重用图形形状。...
- Qt在数据可视化项目实战:C++仪表板开发
-
Qt里面搞数据可视化，咱今儿就聊聊怎么用C++整一个漂亮的仪表盘。...
- 实战PyQt5: 152-QChart图表之日期时间坐标轴
-
在统计图表中，使用时间作为某一坐标轴的情况非常常见，比如，常见的一年间月度销售统计，财务统计等等。在QChart中提供了日期时间坐标轴QDateTimeAxis类可以方便地将日期和时间添加到图表的坐标...
- 我的Qt五子棋AI已连胜238局，不服的来战!
-
AlphaGo之父DemisHassabis曾指出...
- Qt 自适应图片之scaled()函数详解
-
如何在改变窗口组件的情况下改变窗口背景图片的大小，我们通常会使用Qt自带的scaled()函数；QImage、QPixmap等绘图设备类都提供scaled()函数。...
- PyQt5界面美化(一)（pyqt5酷炫界面）
-
借助FittenCode插件进行PyQt5界面美化！例如从网上找到一张漂亮的UI示意图：接下来借助FittenCode插件一步一步实现如上图中的界面。首先我们先进行提问，它会给出一个大致框架的代码...
- 多线程Qt下的八条规则（qt多线程直接处理数据）
-
相信资深Qter都认识GiuseppeD’Angelo，这位有着二十多年Qt开发经验，Qt源码行数贡献的最多的开发者之一，同时也是Qt项目的审批者，所说话的份量不言而喻。原文作者：...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)