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

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

🚀前言

在 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>
        ...
    </script>
</body>
</html>
  • <div id="Application">：这是 Vue 应用的根容器，Vue 实例将挂载在此容器内。
  • <sub-com>：这是一个自定义组件，将在 Vue 应用中被注册并使用，组件内部将展示 content 变量。

在这里插入图片描述

🔎2.JavaScript 部分解析

🦋2.1 Vue 应用实例

const App = Vue.createApp({})
  • createApp({})：创建一个新的 Vue 应用实例，传入一个空对象表示该应用没有具体的组件逻辑。通常，应用的根组件会在这里定义，但在这个示例中，根组件没有定义。

🦋2.2 全局错误和警告处理

App.config.errorHandler = (err, vm, info) => {
    // 捕获运行中产生的异常
    // err参数是错误对象 info为具体的错误信息
}

App.config.warnHandler = (msg, vm, trace) => {
    // 捕获运行中产生的警告
    // msg是警告信息 trace是组件的关系回溯
}
  • App.config.errorHandler：全局错误处理器，捕获应用中所有组件发生的错误。每当一个组件抛出错误时，会触发此函数，接收 err（错误对象）、vm（Vue 实例）和 info（错误信息，通常是 Vue 的一些额外调试信息）。
  • App.config.warnHandler：全局警告处理器，捕获应用中所有组件发生的警告。接收 msg（警告信息）和 trace（组件的关系回溯，帮助调试组件间的调用关系）。

这些全局配置的作用是确保开发者能够在应用运行时捕获和处理错误和警告，提升应用的健壮性和可调试性。

🦋2.3 全局数据配置

App.config.globalProperties = {
    version: "1.0.0"
}
  • App.config.globalProperties：该配置项允许你在 Vue 应用的任何组件中访问全局属性。在这个例子中，我们将 version: "1.0.0" 添加到全局配置中。
  • 这意味着，在任何组件内，都可以通过 this.$appContext.config.globalProperties.version 来访问到全局的 version 数据。

🦋2.4 定义子组件 sub-com

const sub = {
    setup() {
        // 在setup函数中获取当前组件实例
        const instance = Vue.getCurrentInstance()
        
        Vue.onMounted(() => {
            // 在任意组件的任意地方都可以通过组件实例直接访问全局数据
            console.log(instance.appContext.config.globalProperties.version)
        })
    },
    directives: {
        // 组件内部的自定义指令
        getfocus: {
            mounted(el) {
                el.focus()  // 自定义指令：当元素挂载时，自动获取焦点
            }
        }
    }
}

☀️2.4.1 setup 函数

  • setup()：这是 Vue 3 的 Composition API 中的核心函数，用于定义组件的响应式状态、生命周期钩子等。该函数在组件实例创建时立即执行。

  • Vue.getCurrentInstance()：获取当前组件的实例。在 setup() 中，Vue 会提供当前组件的实例，返回一个包含组件实例的对象，instance 就是这个对象。通过 instance，你可以访问到组件的各种属性和方法。

  • instance.appContext.config.globalProperties.version：通过获取当前组件实例，我们可以访问到 appContext，从中获取到 globalProperties，从而访问到全局配置的数据 version。

  • onMounted：当组件挂载完成时触发的生命周期钩子。此时，我们可以访问 DOM 和执行一些操作。在这里，我们通过 instance.appContext.config.globalProperties.version 输出全局的 version 数据。

☀️2.4.2 自定义指令

directives: {
    getfocus: {
        mounted(el) {
            el.focus()  // 自定义指令：当元素挂载时，自动获取焦点
        }
    }
}
  • getfocus：这是一个自定义指令，指令的功能是在元素挂载时自动将焦点设置到该元素上。
  • mounted(el)：当元素挂载到 DOM 时，mounted 钩子会被调用。在这里，我们获取到元素 el，并调用 el.focus() 来让元素获得焦点。

🦋2.5 注册组件和挂载 Vue 实例

App.component("sub-com", sub)  // 注册子组件
App.mount("#Application")      // 挂载 Vue 实例到 id="Application" 的 DOM 元素
  • App.component("sub-com", sub)：注册一个名为 sub-com 的子组件，该组件的定义是 sub，即我们刚刚创建的组件对象。
  • App.mount("#Application")：将 Vue 应用实例挂载到 HTML 元素 id="Application" 上，启动 Vue 应用。

🔎3.总结

这段代码展示了以下几个 Vue 3 中的功能：

  1. 全局错误和警告处理：

    • 通过 App.config.errorHandler 和 App.config.warnHandler，我们可以捕获应用中的错误和警告并处理它们。

  2. 全局数据配置：

    • 通过 App.config.globalProperties，我们定义了一个全局属性 version，可以在任何组件中通过实例访问。

  3. Composition API 中的 setup 函数：

    • 在 sub-com 组件的 setup 函数中，我们通过 Vue.getCurrentInstance() 获取当前组件的实例，并在 onMounted 生命周期钩子中输出全局的 version 数据。

  4. 自定义指令：

    • 组件内部定义了一个自定义指令 getfocus，用于自动聚焦在元素上。

总体来说，这段代码展示了如何在 Vue 3 中使用全局配置、生命周期钩子、Composition API 和自定义指令来增强应用的功能。这些功能使得 Vue 的灵活性和扩展性更强，有助于构建复杂的应用。

🚀二、组件的嵌套

🔎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">
        <comp1></comp1>
    </div>
    <script>
        ...
    </script>
</body>
</html>
  • <div id="Application">：这是 Vue 应用的根容器，Vue 实例会挂载到这个容器内，显示组件的内容。
  • <comp1></comp1>：这是我们定义的 comp1 组件标签，在页面加载时会展示 comp1 组件的内容。

在这里插入图片描述

🔎2.JavaScript 部分解析

🦋2.1 创建 Vue 应用实例

const App = Vue.createApp({})
  • Vue.createApp({})：这里创建了一个空的 Vue 应用实例 App，由于没有传入具体的组件选项（即 {}），它表示一个最基本的 Vue 应用。

🦋2.2 定义组件 comp2

const comp2 = {
    template: `
        <div>
            组件2
        </div>
    `
}

  • comp2 组件：这个组件很简单，只有一个 template，它展示了一个包含文本 “组件2” 的 <div> 元素。

  • template 是 Vue 组件中的模板部分，它定义了组件渲染的 HTML 结构。在这里，comp2 组件渲染的是一个简单的 div 标签，内部包含了文本 “组件2”。

🦋2.3 定义组件 comp1

const comp1 = {
    components: {
        'comp2': comp2
    },
    template: `
        <div>
            组件1
            <comp2></comp2>
        </div>
    `
}

  • comp1 组件：

    • components：这是组件的选项之一，用于注册子组件。在这里，comp1 组件注册了 comp2 组件，并且在 comp1 的模板中嵌套了 comp2。通过这种方式，comp1 可以在自身的模板中使用 comp2。
    • template：comp1 的模板中包含了文本 “组件1” 和一个 <comp2></comp2> 标签，意味着 comp1 将显示文本 “组件1”，并在其下嵌套显示 comp2 组件。

    通过这种方式，comp1 组件会包含 comp2 组件的内容，即 “组件2”。

🦋2.4 注册并挂载 Vue 应用

App.component("comp1", comp1)
App.mount("#Application")

  • App.component("comp1", comp1)：

    • 这行代码将 comp1 组件注册为全局组件，使得可以在任何地方使用 <comp1></comp1> 标签来渲染该组件。
    • 注册的组件名称是 "comp1"，可以通过 <comp1></comp1> 标签引用它。

  • App.mount("#Application")：

    • 将 Vue 应用实例挂载到 id="Application" 的 DOM 元素上。这样，Vue 就会在这个元素内渲染整个应用，显示 comp1 组件的内容。
    • comp1 组件内部有 comp2，因此页面会先显示 comp1 中的 “组件1”，然后嵌套显示 comp2 中的 “组件2”。

🔎2.代码运行时的展示效果

  1. comp1 渲染：在页面中，comp1 组件的模板中包含了文本 “组件1” 和子组件 <comp2></comp2>。
  2. comp2 渲染：comp1 中嵌套了 comp2，所以 comp2 会被渲染为一个包含文本 “组件2” 的 div 元素。

最终页面展示的内容是：

组件1
组件2

🔎3.总结

  • 这段代码展示了如何在 Vue 3 中定义和注册多个组件，并通过组件嵌套的方式将一个组件作为子组件使用。
  • 主要的步骤包括：
    1. 使用 createApp() 创建 Vue 应用实例。
    2. 定义组件 comp1 和 comp2，其中 comp1 嵌套使用了 comp2。
    3. 注册组件并将其挂载到一个 DOM 元素上。
  • comp1 和 comp2 都是 Vue 组件，comp1 通过 components 选项将 comp2 注册为子组件，并在其模板中引用 comp2。

通过这种方式，Vue 允许开发者轻松构建具有组件化结构的应用，支持组件之间的嵌套与复用。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript Vue 容器
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入