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

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》027-组件的高级配置和嵌套

news 2026/2/9 21:06:14
标题详情
作者简介愚公搬代码
头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎👍点赞、✍评论、⭐收藏

文章目录

  • 🚀前言
  • 🚀一、组件的高级配置
    • 🔎1.HTML 部分
    • 🔎2.JavaScript 部分解析
      • 🦋2.1 Vue 应用实例
      • 🦋2.2 全局错误和警告处理
      • 🦋2.3 全局数据配置
      • 🦋2.4 定义子组件 `sub-com`
        • ☀️2.4.1 `setup` 函数
        • ☀️2.4.2 自定义指令
      • 🦋2.5 注册组件和挂载 Vue 实例
    • 🔎3.总结
  • 🚀二、组件的嵌套
    • 🔎1.HTML 部分解析
    • 🔎2.JavaScript 部分解析
      • 🦋2.1 创建 Vue 应用实例
      • 🦋2.2 定义组件 `comp2`
      • 🦋2.3 定义组件 `comp1`
      • 🦋2.4 注册并挂载 Vue 应用
    • 🔎2.代码运行时的展示效果
    • 🔎3.总结

🚀前言

在 Vue.js 的开发中，组件是构建用户界面的基石。随着应用的复杂度不断增加，仅仅掌握基本的组件使用已远远不够。为了实现更灵活、可重用和高效的组件设计，我们必须深入了解组件的高级配置。这些高级特性可以帮助我们优化代码结构、提高性能，并实现复杂的交互效果。

本篇文章将聚焦于 Vue 组件的高级配置选项，包括混入（mixins）、自定义指令、异步组件、动态组件、插槽（slots）的深入使用等内容。我们将逐一探讨这些特性，分享如何在实际项目中灵活运用它们，以满足不同的业务需求和设计目标。

🚀一、组件的高级配置

🔎1.HTML 部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue组件生命周期</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="Application"><sub-com>{{content}}</sub-com></div><script>

相关文章：

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》027-组件的高级配置和嵌套

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...

编程日记 2025/1/29 0:33:33

预测性维护系统：让设备“未卜先知”

预测性维护系统：让设备“未卜先知” 在工业4.0的浪潮中，设备管理正在向智能化转型。传统的设备维护方式，要么是定期维护（时间消耗大），要么是被动维修（问题发生后再处理）。这种方式效率低下且成本高昂。而预测性维护（Predictive Maintenance，简称PdM）则为设备管理提…...

编程日记 2025/1/29 0:32:31

Qt Ribbon使用实例

采用SARibbon创建简单的ribbon界面 实例代码如下所示&#xff1a; 1、头文件&#xff1a; #pragma once #include <SARibbonBar.h> #include "SARibbonMainWindow.h" class QTextEdit; class SAProjectDemo1 : public SARibbonMainWindow { Q_OBJECT pub…...

编程日记 2025/1/29 0:26:22

Midscene.js：重新定义UI自动化的新时代工具

前言 Midscene.js 是一个创新的、面向开发者的 UI 自动化解决方案&#xff0c;并通过人工智能技术简化自动化脚本的编写与维护。 它提供了三种核心方法——交互&#xff08;.ai, .aiAction&#xff09;、提取&#xff08;.aiQuery&#xff09;和断言&#xff08;.aiAssert&am…...

编程日记 2025/1/29 0:25:14

【C语言基础】编译并运行第一个C程序

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 博客内容主要围绕&#xff1a; 5G/6G协议讲解 高级C语言讲解 Rust语言讲解 文章目录 编译并运行第一个C程序一、编译上面的程序二、运行上面的程序…...

编程日记 2025/1/29 0:24:12

处理 .gitignore 未忽略文件夹问题

本地删除缓存 例如 .idea 文件夹被其他同事误提交&#xff0c;那么他本地执行以下代码 git rm -r --cached .idea对应本地再提交即可...

编程日记 2025/1/29 0:23:09

php-phar打包避坑指南2025

有很多php脚本工具都是打包成phar形式&#xff0c;使用起来就很方便&#xff0c;那么如何自己做一个呢&#xff1f;也找了很多文档&#xff0c;也遇到很多坑&#xff0c;这里就来总结一下 phar安装 现在直接装yum php-cli包就有phar文件&#xff0c;很方便 可通过phar help查看…...

编程日记 2025/1/29 0:19:56

卡特兰数学习

1&#xff0c;概念 卡特兰数&#xff08;英语&#xff1a;Catalan number&#xff09;&#xff0c;又称卡塔兰数&#xff0c;明安图数。是组合数学中一种常出现于各种计数问题中的数列。它在不同的计数问题中频繁出现。 2&#xff0c;公式 卡特兰数的递推公式为&#xff1a;f(…...

编程日记 2025/1/29 0:14:50

第05章 10 地形梯度场模拟显示

在 VTK&#xff08;Visualization Toolkit&#xff09;中&#xff0c;可以通过计算地形数据的梯度场&#xff0c;并用箭头或线条来表示梯度方向和大小&#xff0c;从而模拟显示地形梯度场。以下是一个示例代码&#xff0c;展示了如何使用 VTK 和 C 来计算和显示地形数据的梯度场…...

编程日记 2025/1/29 0:10:45

2023CISCN初赛unzip

2023CISCN初赛unzip 随便上传一个文件&#xff0c;会自动跳转到uplaod.php目录下,源码如下&#xff1a; <?php error_reporting(0); highlight_file(__FILE__);$finfo finfo_open(FILEINFO_MIME_TYPE); if (finfo_file($finfo, $_FILES["file"]["tmp_name…...

编程日记 2025/1/29 0:09:44

计算机网络 （55）流失存储音频/视频

一、定义与特点 定义&#xff1a;流式存储音频/视频是指经过压缩并存储在服务器上的多媒体文件&#xff0c;客户端可以通过互联网边下载边播放这些文件&#xff0c;也称为音频/视频点播。 特点&#xff1a; 边下载边播放&#xff1a;用户无需等待整个文件下载完成即可开始播放…...

编程日记 2025/1/29 0:05:37

Linux通过docker部署京东矩阵容器服务

获取激活码 将京东无线宝app升级到最新版,然后打开首页,点击号 选择添加容器矩阵,然后获取激活码 运行容器 read -p "请输入你的激活码: " ACTIVECODE;read -p "请输入宿主机的缓存路径: " src;docker rm -f cmatrix;docker run -d -it --name cmatrix …...

编程日记 2025/1/29 0:02:30

【MySQL】悲观锁和乐观锁的原理和应用场景

悲观锁和乐观锁&#xff0c;并不是 MySQL 或者数据库中独有的概念&#xff0c;而是并发编程的基本概念。 主要区别在于&#xff0c;操作共享数据时&#xff0c;“悲观锁”认为数据出现冲突的可能性更大&#xff0c;而“乐观锁”则是认为大部分情况不会出现冲突&#xff0c;进而…...

编程日记 2025/1/28 23:58:22

Java Web-Tomcat Servlet

Web服务器-Tomcat Web服务器简介 Web 服务器是一种软件程序&#xff0c;它主要用于在网络上接收和处理客户端&#xff08;如浏览器&#xff09;发送的 HTTP 请求&#xff0c;并返回相应的网页内容或数据。以下是关于 Web 服务器的详细介绍&#xff1a; 功能 接收请求&#…...

编程日记 2025/1/28 23:56:20

老牌工具被破！

屏幕录制技术因其高效的信息传递能力在多个行业中得到了广泛应用&#xff0c;在教育领域&#xff0c;教师利用屏幕录制制作在线课程。在企业培训中&#xff0c;它为新员工提供了灵活的学习方式。在直播、游戏时&#xff0c;录制分享精彩内容。在客户支持中&#xff0c;客服人员…...

编程日记 2025/1/28 23:53:16

在计算机上本地运行 Deepseek R1

Download Ollama on Linux Download Ollama on Windows Download Ollama on macOS Deepseek R1 是一个强大的人工智能模型&#xff0c;在科技界掀起了波澜。它是一个开源语言模型&#xff0c;可以与 GPT-4 等大玩家展开竞争。但更重要的是&#xff0c;与其他一些模型不同&…...

编程日记 2025/1/28 23:49:10

MongoDB中常用的几种高可用技术方案及优缺点

MongoDB 的高可用性方案主要依赖于其内置的 副本集 (Replica Set) 和 Sharding 机制。下面是一些常见的高可用性技术方案&#xff1a; 1. 副本集 (Replica Set) 副本集是 MongoDB 提供的主要高可用性解决方案&#xff0c;确保数据在多个节点之间的冗余存储和自动故障恢复。副…...

编程日记 2025/1/28 23:48:05

【GoLang】利用validator包实现服务端参数校验时自定义错误信息

在C/S架构下&#xff0c;服务端在校验请求参数时&#xff0c;若出现参数错误&#xff0c;要响应给客户端一个错误消息&#xff0c;通常我们会统一响应“参数错误”。 但是&#xff0c;如果只是一味的提示参数错误&#xff0c;我并不知道具体是哪个参数错了呀&#xff01;能不能…...

编程日记 2025/1/28 23:42:56

异或哈希总结

例题 例题1https://codeforces.com/problemset/problem/1175/Fhttps://codeforces.com/problemset/problem/1175/F 例题2https://codeforces.com/contest/2014/problem/Hhttps://codeforces.com/contest/2014/problem/H例题4https://codeforces.com/contest/1418/problem/Ght…...

编程日记 2025/1/28 23:41:53

【Rust自学】15.7. 循环引用导致内存泄漏

说句题外话&#xff0c;这篇文章真心很难&#xff0c;有看不懂可以在评论区问&#xff0c;我会尽快作答的。 喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω…...

编程日记 2025/1/28 23:40:52

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/9/15 14:56:23

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）​方法二：CMD命令…...

编程新知 2025/8/27 20:07:03

stm32进入Infinite_Loop原因（因为有系统中断函数未自定义实现）

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...

编程新知 2025/12/10 8:37:24

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类，这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前，需要明确协议的具体格式。例如，一个简单的…...

编程新知 2026/2/7 9:05:47