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

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

article 2026/5/12 7:43:35
标题详情
作者简介愚公搬代码
头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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年度…...

编程日记 2026/1/26 7:48:11

一文讲解Java中Object类常用的方法

在Java中&#xff0c;经常提到一个词“万物皆对象”&#xff0c;其中的“万物”指的是Java中的所有类&#xff0c;而这些类都是Object类的子类&#xff1b; Object主要提供了11个方法&#xff0c;大致可以分为六类&#xff1a; 对象比较&#xff1a; public native int has…...

编程日记 2026/5/5 6:04:07

操作系统之输入输出

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

编程日记 2026/5/3 7:43:10

【Convex Optimization Stanford】Lec3 Function

【Convex Optimization Stanford】Lec3 Function 前言凸函数的定义对凸函数在一条线上的限制增值扩充&#xff1f; 一阶条件二阶条件一些一阶/二阶条件的例子象集和sublevel set关于函数凸性的扩展&#xff08;Jesen Inequality)保持函数凸性的操作非负加权和 & 仿射函数的…...

编程日记 2026/4/25 8:35:05

【Linux探索学习】第二十七弹——信号（一）：Linux 信号基础详解

Linux学习笔记&#xff1a; https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言&#xff1a; 前面我们已经将进程通信部分讲完了&#xff0c;现在我们来讲一个进程部分也非常重要的知识点——信号&#xff0c;信号也是进程间通信的一…...

编程日记 2026/5/1 4:18:56

SpringBoot或SpringAI对接DeekSeek大模型

今日除夕夜&#xff0c;deepseek可是出尽了风头&#xff0c;但是我看网上还没有这方面的内容对接&#xff0c;官网也并没有&#xff0c;故而本次对接是为了完成这个空缺 我看很多的博客内容是流式请求虽然返回时正常的&#xff0c;但是他并不是实时返回&#xff0c;而是全部响应…...

编程日记 2026/4/25 8:35:05

Funnel-Transformer：通过过滤序列冗余实现高效语言处理

摘要 随着语言预训练的成功&#xff0c;开发更具扩展性且能高效利用大量未标注数据的架构变得尤为重要。为了提高效率&#xff0c;我们研究了在维持完整token级别表示时的冗余问题&#xff0c;尤其是对于仅需要序列单向量表示的任务。基于这一直觉&#xff0c;我们提出了Funne…...

编程日记 2026/5/7 0:17:10

【搜索回溯算法】：BFS的魔力--如何使用广度优先搜索找到最短路径

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;搜索回溯算法篇–CSDN博客 文章目录 一.广度优先搜索&#xff08;BFS&#xff09;解决最短路…...

编程日记 2026/4/25 8:35:06

【算法】经典博弈论问题——威佐夫博弈 python

目录 威佐夫博弈(Wythoff Game)【模板】 威佐夫博弈(Wythoff Game) 有两堆石子&#xff0c;数量任意&#xff0c;可以不同&#xff0c;游戏开始由两个人轮流取石子 游戏规定&#xff0c;每次有两种不同的取法 1)在任意的一堆中取走任意多的石子 2)可以在两堆中同时取走相同数量…...

编程日记 2026/4/30 8:19:09

CUDA学习-内存访问

一 访存合并 1.1 说明 本部分内容主要参考： 搞懂 CUDA Shared Memory 上的 bank conflicts 和向量化指令（LDS.128 / float4）的访存特点 - 知乎 1.2 share memory结构 图1.1 share memory结构 放在 shared memory 中的数据是以 4 bytes（即 32 bits）作为 1 个 word，依…...

编程日记 2026/4/25 8:35:01

力扣动态规划-13【算法学习day.107】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…...

编程日记 2026/5/10 14:58:41

《剪映5.9官方安装包》免费自动生成字幕

&#xff08;避免失效建议存自己网盘后下载&#xff09;剪映5.9官方Win.Mac 链接&#xff1a;https://pan.xunlei.com/s/VOHc-Fg2XRlD50MueEaOOeW1A1?pwdawtt# 官方唯一的免费版&#xff0c;Win和Mac都有&#xff0c;此版本官方已下架&#xff0c;觉得有用可转存收藏&#xf…...

编程日记 2026/5/1 6:58:53

ESP32-S3模组上跑通esp32-camera（32）

接前一篇文章：ESP32-S3模组上跑通esp32-camera（31） 一、OV5640初始化 2. 相机初始化及图像传感器配置 上一回开始解析camera_probe函数的第8段即最后一段代码，本回继续解析该段代码。为了便于理解和回顾，再次贴出camera_probe函数源码，在components/esp32-camera/drive…...

编程日记 2025/5/3 4:14:03

Brave132 编译指南 Windows 篇：安装 Visual Studio 2022（二）

1. 引言 在着手编译 Brave 浏览器的 132 版本之前&#xff0c;构建一个完备的开发环境至关重要。Visual Studio 2022 作为一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;为 Brave 浏览器的编译提供了坚实的工具链和技术支持。它不仅提供了高效的代码编辑…...

编程日记 2026/5/11 23:35:00

DBO-高斯回归预测matlab

蜣螂优化算法(Dung Beetle Optimizer, DBO)是一种新型的群智能优化算法&#xff0c;在2022年底提出&#xff0c;主要是受蜣螂的的滚球、跳舞、觅食、偷窃和繁殖行为的启发。 本次研究使用的是 Excel 格式的股票预测数据。数据集按照 8&#xff1a;1&#xff1a;1 的比例&#x…...

编程日记 2026/4/30 6:05:47

2025美国大学生数学建模竞赛美赛E题成品参考论文（48页）（含模型，可运行代码，求解结果）

2025美国大学生数学建模竞赛E题成品参考论文 目录 一、问题重述 二、问题分析 三、模型假设 四、模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1代码&#xff08;仅供参考&#xff09; 4.1.4问题1求解结果&#xff08;仅供参考&…...

编程日记 2026/4/25 8:38:52

VMware 中Ubuntu无网络连接/无网络标识解决方法【已解决】

参考文档 Ubuntu无网络连接/无网络标识解决方法_ubuntu没网-CSDN博客 再我们正常使用VMware时&#xff0c;就以Ubuntu举例可能有时候出现无网络连接&#xff0c;甚至出现无网络标识的情况&#xff0c;那么废话不多说直接上教程 环境&#xff1a;无网络 解决方案&#…...

编程日记 2026/4/29 17:57:03

Vuex中的getter和mutation有什么区别

在现代前端开发中&#xff0c;状态管理是一个不可忽视的话题&#xff0c;而Vuex作为Vue.js的官方状态管理库&#xff0c;在大型应用中扮演着至关重要的角色。当我们使用Vuex进行状态管理时&#xff0c;getter和mutation是两个重要的概念。虽然它们都是用来处理状态的&#xff0…...

编程日记 2025/2/5 12:20:28

笔试-二维数组2

应用 现有M(1<M<10)个端口组&#xff0c;每个端口组是长度为N(1<N<100)&#xff0c;元素均为整数。如果这些端口组间存在2个及以上的元素相同&#xff0c;则认为端口组可以关联合并&#xff1b;若可以关联合并&#xff0c;请用二位数组表示输出结果。其中&#xf…...

编程日记 2026/2/25 20:02:40

基于RIP的MGRE VPN综合实验

实验拓扑 实验需求 1、R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;其所有地址均配为公有IP地址&#xff1b; 2、R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方&#xff1b; R2与R5之间使用ppp的CHAP认证&#xff0c;R5为主认证方&#xff1b; R3与R5之间使用HDLC封…...

编程日记 2026/5/8 8:10:37

十三先天记

没有一刻&#xff0c;只有当下在我心里。我像星星之间的空间一样空虚。他们是我看到的第一件事&#xff0c;我知道的第一件事。 在接下来的时间里&#xff0c;我意识到我是谁&#xff0c;我是谁。我知道星星在我上方&#xff0c;星球的固体金属体在我脚下。这个支持我的世界是泰…...

编程日记 2025/2/4 23:11:02

Autosar-Os是怎么运行的？（Os基础模块）

写在前面&#xff1a; 入行一段时间了&#xff0c;基于个人理解整理一些东西&#xff0c;如有错误&#xff0c;欢迎各位大佬评论区指正&#xff01;&#xff01;&#xff01; 书接上文 Autosar-Os是怎么运行的&#xff1f;&#xff08;一&#xff09;-CSDN博客 目录 1.Resourc…...

编程日记 2026/5/5 23:13:42

OPencv3.4.1安装及配置教程

来到GitHub上opencv的项目地址 https://github.com/opencv/opencv/releases/tag/3.4.1 以上资源包都是 OpenCV 3.4.1 版本相关资源&#xff0c;它们的区别如下&#xff1a; (1). opencv-3.4.1-android-sdk.zip&#xff1a;适用于 Android 平台的软件开发工具包&#xff08;SDK…...

编程日记 2026/5/6 18:57:02

选择困难？直接生成pynput快捷键字符串

from pynput import keyboard# 文档&#xff1a;https://pynput.readthedocs.io/en/latest/keyboard.html#monitoring-the-keyboard # 博客(pynput相关源码)&#xff1a;https://blog.csdn.net/qq_39124701/article/details/145230331 # 虚拟键码(十六进制)&#xff1a;https:/…...

编程日记 2026/5/11 19:39:55

Vue.js组件开发-如何实现带有搜索功能的下拉框

创建 Vue 项目&#xff1a; 如果还没有创建一个 Vue 项目&#xff0c;可以使用 Vue CLI 来创建一个新的项目。 vue create my-project cd my-project安装依赖&#xff1a; 如果需要使用第三方组件库&#xff0c;比如 Element UI 或 Ant Design Vue&#xff0c;可以安装相应的…...

编程日记 2026/3/24 18:47:23

java 字符串日期字段格式化前端显示

在 Java 应用程序中&#xff0c;如果你有一个字符串类型的日期字段&#xff0c;并希望将其格式化后显示在前端&#xff0c;可以通过多种方式实现。这通常涉及到在后端将字符串转换为 Date 或 LocalDateTime 等对象&#xff0c;然后使用适当的注解或配置来确保它们以正确的格式序…...

编程日记 2026/3/26 14:40:25

LeetCode题练习与总结：安装栅栏--587

一、题目描述 给定一个数组 trees&#xff0c;其中 trees[i] [xi, yi] 表示树在花园中的位置。 你被要求用最短长度的绳子把整个花园围起来&#xff0c;因为绳子很贵。只有把 所有的树都围起来&#xff0c;花园才围得很好。 返回恰好位于围栏周边的树木的坐标。 示例 1: 输…...

编程日记 2026/4/29 14:56:33

＜ OS 有关 ＞ 阿里云 几个小时前 使用密钥替换 SSH 密码认证后， 发现主机正在被“攻击” 分析与应对

信息来源&#xff1a; 文件&#xff1a;/var/log/auth.log 因为在 sshd_config 配置文件中&#xff0c;已经定义 LogLevel INFO 部分内容&#xff1a; 2025-01-27T18:18:55.68272708:00 jpn sshd[15891]: Received disconnect from 45.194.37.171 port 58954:11: Bye Bye […...

编程日记 2026/5/9 6:25:20

使用八爪鱼爬虫和Web Scraper抓取数据实战案例，附详细教程

最近有不少小伙伴咨询怎么抓取抖音视频或者评论的数据&#xff0c;他们多是自媒体或者商家&#xff0c;想要模仿爆火视频或者分析视频评论区的舆情信息&#xff0c;确实呀&#xff0c;现在抖音是流量高地&#xff0c;淘金的地方&#xff0c;真的是一个值得挖掘的宝藏。当然我一…...

编程日记 2026/5/1 1:54:48

海外问卷调查渠道查如何设置：最佳实践+示例

随着经济全球化和一体化进程的加速&#xff0c;企业间的竞争日益加剧&#xff0c;为了获得更大的市场份额&#xff0c;对企业和品牌而言&#xff0c;了解受众群体的的需求、偏好和痛点才是走向成功的关键。而海外问卷调查才是获得受众群体痛点的关键&#xff0c;制作海外问卷调…...

编程日记 2026/4/25 8:35:26