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

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

news 2026/4/1 20:49:44
标题详情
作者简介愚公搬代码
头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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

嵌入式开发者的效率利器：在VS Code里实时看到MISRA-C违规提示（含头文件路径配置避坑）

嵌入式开发实战&#xff1a;用VS Code打造MISRA-C实时检查工作流 每次保存代码后才发现MISRA-C违规有多痛苦&#xff1f;想象一下这样的场景&#xff1a;你正在编写一段关键的车载控制逻辑&#xff0c;反复调试后终于通过了编译&#xff0c;却在提交前的静态检查中被揪出二十多…...

编程新知 2026/4/1 20:29:56

GLM-4v-9b效果展示：直播带货截图→话术分析+转化点提炼

GLM-4v-9b效果展示&#xff1a;直播带货截图→话术分析转化点提炼 1. 模型能力概览 GLM-4v-9b是智谱AI在2024年开源的多模态视觉-语言模型&#xff0c;拥有90亿参数。这个模型最大的特点是能够同时理解图片和文字&#xff0c;支持中英文多轮对话&#xff0c;在11201120高分辨…...

编程新知 2026/4/1 18:54:54

FastAPI日志配置终极指南：10个简单步骤实现生产级日志管理

FastAPI日志配置终极指南&#xff1a;10个简单步骤实现生产级日志管理 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI作为现代…...

编程新知 2026/4/1 18:46:44

利用快马ai快速构建基于jdk 17的spring boot web应用原型

最近在尝试快速搭建一个基于JDK 17的Spring Boot Web应用原型&#xff0c;发现用传统方式从零开始配置环境、搭建框架特别耗时。特别是JDK版本兼容性问题和依赖配置&#xff0c;经常要折腾半天。后来尝试了InsCode(快马)平台&#xff0c;整个过程变得异常简单&#xff0c;分享下…...

编程新知 2026/4/1 17:03:39

ROS实战：UZH-FPV数据集下PL-EVIO与主流VIO算法的性能对比

1. UZH-FPV数据集与无人机视觉里程计的挑战 UZH-FPV数据集是苏黎世联邦理工学院发布的专门针对高速无人机场景的多模态数据集。这个数据集最大的特点在于它完整记录了无人机在高速机动飞行&#xff08;最高速度超过10m/s&#xff09;时的多传感器数据&#xff0c;包括双目事件相…...

编程新知 2026/4/1 16:51:12

langchain4j 学习系列(9)-AIService与可观测性

一、基本用法1.1 定义业务接口View Code注&#xff1a;{{it}}是langchain4j内部约定的默认占位符名。当只有1个参数时&#xff0c;{{it}}在运行时&#xff0c;会自动替换成用户的prompt. 当然也可以强制指定参数名&#xff0c;就本示例而言&#xff0c;注释的二种写法&#xff…...

编程新知 2026/4/1 14:37:01

拦截器与 JWT 联合使用详解

1. 核心概念1.1 什么是 JWT&#xff1f;JWT 是一个开放标准&#xff08;RFC 7519&#xff09;&#xff0c;用于在各方之间以 JSON 对象的形式安全地传输信息。该信息可以被验证和信任&#xff0c;因为它是数字签名的。JWT 结构&#xff1a;Header&#xff08;头部&#xff09;&…...

编程新知 2026/4/1 14:05:46

春联生成模型快速上手：输入‘幸福‘、‘平安‘等关键词，自动生成对仗工联

春联生成模型快速上手&#xff1a;输入幸福、平安等关键词&#xff0c;自动生成对仗工联 1. 春联生成器简介 春节贴春联是中国人延续千年的传统习俗&#xff0c;但创作一副对仗工整、寓意吉祥的春联并不容易。现在&#xff0c;借助AI技术&#xff0c;任何人都能轻松生成专业水…...

编程新知 2026/4/1 13:49:21

告别手动爆肝：用AiScan-N自动化你的CTF Web漏洞测试（SQL注入/文件上传实战）

智能渗透测试革命&#xff1a;AiScan-N在CTF中的实战应用与效率跃升 当凌晨三点的CTF比赛进入白热化阶段&#xff0c;你的眼皮开始打架&#xff0c;而对手却像永动机般不断提交flag——这种场景下&#xff0c;传统手动渗透测试的局限性暴露无遗。我曾亲眼见证一位资深红队成员…...

编程新知 2026/4/1 12:56:28

Sulpho-Methyltetrazine-NHS ester，磺化甲基四嗪-琥珀酰亚胺酯的结构特点与功能

Sulpho-Methyltetrazine-NHS ester 是一种结合了磺酸基团、甲基四嗪和 NHS 酯三大功能模块的化学试剂&#xff0c;在生物化学和药物研发等领域具有广泛应用。以下是对其详细介绍&#xff1a;一、基本信息英文名称&#xff1a;Sulpho-Methyltetrazine-NHS ester&#xff08;或 S…...

编程新知 2026/4/1 12:16:11