【愚公系列】《循序渐进Vue.js 3.x前端开发实践》027-组件的高级配置和嵌套
标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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 中的功能:
-
全局错误和警告处理:
- 通过
App.config.errorHandler
和App.config.warnHandler
,我们可以捕获应用中的错误和警告并处理它们。
- 通过
-
全局数据配置:
- 通过
App.config.globalProperties
,我们定义了一个全局属性version
,可以在任何组件中通过实例访问。
- 通过
-
Composition API 中的
setup
函数:- 在
sub-com
组件的setup
函数中,我们通过Vue.getCurrentInstance()
获取当前组件的实例,并在onMounted
生命周期钩子中输出全局的version
数据。
- 在
-
自定义指令:
- 组件内部定义了一个自定义指令
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”。
- 将 Vue 应用实例挂载到
🔎2.代码运行时的展示效果
comp1
渲染:在页面中,comp1
组件的模板中包含了文本 “组件1” 和子组件<comp2></comp2>
。comp2
渲染:comp1
中嵌套了comp2
,所以comp2
会被渲染为一个包含文本 “组件2” 的div
元素。
最终页面展示的内容是:
组件1
组件2
🔎3.总结
- 这段代码展示了如何在 Vue 3 中定义和注册多个组件,并通过组件嵌套的方式将一个组件作为子组件使用。
- 主要的步骤包括:
- 使用
createApp()
创建 Vue 应用实例。 - 定义组件
comp1
和comp2
,其中comp1
嵌套使用了comp2
。 - 注册组件并将其挂载到一个 DOM 元素上。
- 使用
comp1
和comp2
都是 Vue 组件,comp1
通过components
选项将comp2
注册为子组件,并在其模板中引用comp2
。
通过这种方式,Vue 允许开发者轻松构建具有组件化结构的应用,支持组件之间的嵌套与复用。
- 点赞
- 收藏
- 关注作者
评论(0)