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

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

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/1/25 13:33:24

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38