百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

第11天 | 14天搞定Vue3.0，自定义组件

ztj100 2024-10-27 18:35 15 浏览 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方面的干货。关注我，没错的。

#前端##Vue.js##JavaScript##程序员##Web#

相关推荐

如何将数据仓库迁移到阿里云 AnalyticDB for PostgreSQL

阿里云AnalyticDBforPostgreSQL（以下简称ADBPG，即原HybridDBforPostgreSQL）为基于PostgreSQL内核的MPP架构的实时数据仓库服务，可以...

Python数据分析:探索性分析

写在前面如果你忘记了前面的文章，可以看看加深印象：Python数据处理...

CSP-J/S冲奖第21天:插入排序

...

C++基础语法梳理:算法丨十大排序算法(二)

本期是C++基础语法分享的第十六节，今天给大家来梳理一下十大排序算法后五个！归并排序...

C 语言的标准库有哪些

C语言的标准库并不是一个单一的实体，而是由一系列头文件(headerfiles)组成的集合。每个头文件声明了一组相关的函数、宏、类型和常量。程序员通过在代码中使用#include<...

[深度学习] ncnn安装和调用基础教程

1介绍ncnn是腾讯开发的一个为手机端极致优化的高性能神经网络前向计算框架，无第三方依赖，跨平台，但是通常都需要protobuf和opencv。ncnn目前已在腾讯多款应用中使用，如QQ，Qzon...

用rust实现经典的冒泡排序和快速排序

1.假设待排序数组如下letmutarr=[5,3,8,4,2,7,1];...

ncnn+PPYOLOv2首次结合!全网最详细代码解读来了

编辑：好困LRS【新智元导读】今天给大家安利一个宝藏仓库miemiedetection，该仓库集合了PPYOLO、PPYOLOv2、PPYOLOE三个算法pytorch实现三合一，其中的PPYOL...

C++特性使用建议

1.引用参数使用引用替代指针且所有不变的引用参数必须加上const。在C语言中，如果函数需要修改变量的值，参数必须为指针，如...

Qt4/5升级到Qt6吐血经验总结V202308

00：直观总结增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废...

到底什么是C++11新特性，请看下文

C++11是一个比较大的更新，引入了很多新特性，以下是对这些特性的详细解释，帮助您快速理解C++11的内容1.自动类型推导（auto和decltype）...

掌握C++11这些特性，代码简洁性、安全性和性能轻松跃升!

C++11（又称C++0x）是C++编程语言的一次重大更新，引入了许多新特性，显著提升了代码简洁性、安全性和性能。以下是主要特性的分类介绍及示例：一、核心语言特性1.自动类型推导（auto）编译器自...

经典算法——凸包算法

凸包算法（ConvexHull）一、概念与问题描述凸包是指在平面上给定一组点，找到包含这些点的最小面积或最小周长的凸多边形。这个多边形没有任何内凹部分，即从一个多边形内的任意一点画一条线到多边形边界...

一起学习c++11——c++11中的新增的容器

c++11新增的容器1:array当时的初衷是希望提供一个在栈上分配的，定长数组，而且可以使用stl中的模板算法。array的用法如下:#include<string>#includ...

C++ 编程中的一些最佳实践

1.遵循代码简洁原则尽量避免冗余代码，通过模块化设计、清晰的命名和良好的结构，让代码更易于阅读和维护...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.