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

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

ztj100 2024-10-27 18:35 27 浏览 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#

相关推荐

Jquery 详细用法

1、jQuery介绍(1)jQuery是什么?是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有...

前端开发79条知识点汇总

1.css禁用鼠标事件2.get/post的理解和他们之间的区别http超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。HTTP的工作方式是客户机与服务器之间的请求-应答协议。...

js基础面试题92-130道题目

92.说说你对作用域链的理解参考答案：作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。...

Web前端必备基础知识点，百万网友:牛逼

1、Web中的常见攻击方式1.SQL注入------常见的安全性问题。解决方案：前端页面需要校验用户的输入数据（限制用户输入的类型、范围、格式、长度），不能只靠后端去校验用户数据。一来可以提高后端处理...

事件——《JS高级程序设计》

一、事件流1.事件流描述的是从页面中接收事件的顺序2.事件冒泡（eventbubble）：事件从开始时由最具体的元素（就是嵌套最深的那个节点）开始，逐级向上传播到较为不具体的节点（就是Docu...

前端开发中79条不可忽视的知识点汇总

过往一些不足的地方，通过博客，好好总结一下。1.css禁用鼠标事件...

Chrome 开发工具之Network

经常会听到比如"为什么我的js代码没执行啊？","我明明发送了请求，为什么反应？","我这个网站怎么加载的这么慢？"这类的问题，那么问题既然存在，就需要去解决它，需要解决它，首先我们得找对导致问题的原...

轻量级 React.js 虚拟美化滚动条组件RScroll

前几天有给大家分享一个Vue自定义滚动条组件VScroll。今天再分享一个最新开发的ReactPC端模拟滚动条组件RScroll。...

一文解读JavaScript事件对象和表单对象

前言相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScrip...

Python函数参数黑科技:*args与**kwargs深度解析

90%的Python程序员不知道，可变参数设计竟能决定函数的灵活性和扩展性！掌握这些技巧，让你的函数适应任何场景！一、函数参数设计的三大进阶技巧...

深入理解Python3密码学:详解PyCrypto库加密、解密与数字签名

在现代计算领域，信息安全逐渐成为焦点话题。密码学，作为信息保护的关键技术之一，允许我们加密（保密）和解密（解密）数据。...

阿里Nacos惊爆安全漏洞，火速升级!(附修复建议)

前言好，我是threedr3am，我发现nacos最新版本1.4.1对于User-Agent绕过安全漏洞的serverIdentitykey-value修复机制，依然存在绕过问题，在nacos开启了...

Python模块:zoneinfo时区支持详解

一、知识导图二、知识讲解（一）zoneinfo模块概述...

Golang开发的一些注意事项(一)

1.channel关闭后读的问题当channel关闭之后再去读取它，虽然不会引发panic，但会直接得到零值，而且ok的值为false。packagemainimport"...

Python鼠标与键盘自动化指南:从入门到进阶——键盘篇

`pynput`是一个用于控制和监控鼠标和键盘的Python库...

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

一周热门
最近发表
标签列表
赣ICP备2023011147号-29