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

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

vue dispatch

上一篇：小巧 Vue 页面滚动进度条组件ScrollProgress
下一篇：「干货」学会这些Vue小技巧，可以早点下班和女神约会

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

11.1 局部注册

11.2 全局注册

相关推荐

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

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

【VueTorrent】一款吊炸天的qBittorrent主题，人人都可用

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

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

11.1 局部注册

11.2 全局注册

相关推荐

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

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

【VueTorrent】一款吊炸天的qBittorrent主题，人人都可用

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

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

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起