| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
文章目录
🚀前言
在 Vue.js 的组件化开发中，插槽（Slots）是一种强大的特性，使得组件的内容更加灵活和可定制。通过插槽，我们可以在组件中插入动态内容，实现更高的重用性和可配置性。然而，随着项目复杂度的提升，如何高效地管理和复用插槽的配置就成为了一个重要课题。在这个背景下，Mixin 作为一种复用逻辑的方式，能够与插槽结合使用，帮助我们更好地组织代码。
本篇文章将围绕自定义组件的插槽 Mixin 展开，深入解析如何创建和使用 Mixin 来管理插槽逻辑。我们将探讨插槽的基本用法及其高级应用场景，介绍如何通过 Mixin 提取和复用插槽相关的逻辑，提升组件的可维护性和灵活性。此外，我们还将分享一些最佳实践，帮助你在实际项目中有效地应用这些概念。
🚀一、自定义组件的插槽Mixin
🔎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组件Mixin</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<my-com></my-com>
<my-com1 title="组件1"></my-com1>
<my-com2 title="组件2"></my-com2>
<my-com3 title="组件3"></my-com3>
</div>
<script>
...
</script>
</body>
</html>
<div id="Application">：Vue 应用的挂载容器，所有 Vue 组件都会被渲染到这个容器内。- 这里包含了四个组件：
<my-com>：一个使用了混入（mixin）功能的组件。<my-com1>、<my-com2>、<my-com3>：三个没有使用混入的简单组件，它们只接收一个title属性。
🔎2.JavaScript 部分解析
const { createApp } = Vue
const App = createApp({})
createApp({})：创建一个 Vue 应用实例App，用于注册组件和挂载应用。
🔎3.全局 Mixin 设置
App.mixin({
props: ["title"],
data() {
return {
a: "a",
b: "b",
c: "c"
}
},
mounted() {
console.log("Mixin对象mounted")
}
})
App.mixin：这是 Vue 中的混入（Mixin）功能，允许你将一个对象的选项（如data、methods、mounted等）注入到所有组件中。在这个例子中，定义了一个全局的 mixin。props: ["title"]：每个组件都会接收到一个title属性，这意味着所有组件都能访问到title。data()：为每个组件提供了一些数据，a,b,c三个数据都会被注入到所有组件中。每个组件都能访问这些数据。mounted()：每个组件都将调用这个生命周期钩子函数，并输出"Mixin对象mounted"。
🔎4.组件定义和注册
🦋4.1 组件 my-com（使用了 Mixin）
const com = {
setup() {
const c = "C"
const d = "d"
return { c, d }
},
created() {
// a, b, c, d 都存在
console.log(this.a, this.b, this.c, this.d)
},
mounted() {
console.log("组件本身mounted")
},
template: `
<div style="border:red solid 2px;">
{{title}}
</div>
`
}
setup()：这是 Vue 3 的 Composition API 中的函数。在这里定义了c和d，这两个变量是组件本身定义的，不是来自混入。返回这些变量，使它们可以在模板中使用。created()：当组件实例化后执行。由于这个组件使用了全局 mixin，因此this.a,this.b,this.c,this.d都可以访问到。其中a,b,c是从 mixin 中继承来的数据，而d是组件自身的数据。console.log(this.a, this.b, this.c, this.d)：输出a,b,c,d的值。
mounted()：组件挂载后执行，这里输出"组件本身mounted"。注意，mounted钩子在 mixin 和组件本身中都存在，都会被调用。template：模板部分，显示title属性。
🦋4.2 组件 my-com1, my-com2, my-com3（没有使用 Mixin）
const com1 = {
template: `
<div style="border:red solid 2px;">
{{title}}
</div>
`
}
const com2 = {
template: `
<div style="border:blue solid 2px;">
{{title}}
</div>
`
}
const com3 = {
template: `
<div style="border:green solid 2px;">
{{title}}
</div>
`
}
com1,com2,com3这三个组件没有使用 mixin，它们只是简单的组件。它们的模板都显示了title属性，但没有额外的逻辑或数据。- 这些组件将会接受传递给它们的
title属性并在模板中渲染。
- 这些组件将会接受传递给它们的
🔎5.组件注册和挂载
App.component("my-com1", com1)
App.component("my-com2", com2)
App.component("my-com3", com3)
App.component("my-com", com)
App.mount("#Application")
App.component：这些语句注册了四个组件（my-com1,my-com2,my-com3,my-com）到 Vue 应用中。App.mount("#Application")：将 Vue 应用挂载到id="Application"的 DOM 元素中。
🔎6.代码逻辑总结
全局 Mixin：使用
App.mixin定义了一个全局的混入（mixin），这个混入包含了：- 所有组件都有一个
title属性。 - 所有组件都拥有数据
a,b,c。 - 所有组件都拥有
mounted()钩子，且会输出"Mixin对象mounted"。
- 所有组件都有一个
组件
my-com：- 使用了 Vue 3 的 Composition API，其中定义了
c和d数据。 - 在
created()钩子中，组件访问了从混入中继承的a,b,c，以及组件自身的d数据，打印到控制台。 - 在
mounted()钩子中，打印"组件本身mounted"。
- 使用了 Vue 3 的 Composition API，其中定义了
组件
my-com1,my-com2,my-com3：- 这三个组件没有使用 mixin，只有一个
title属性，在模板中展示该值。
- 这三个组件没有使用 mixin，只有一个
组件渲染：
my-com组件会输出title，并且其行为受到 mixin 的影响，能访问到a,b,c数据。my-com1,my-com2,my-com3组件也会显示title，但它们没有 mixin，因此只接收title。
🔎7.最终输出
在浏览器控制台，
my-com组件在创建时会输出：a b c d（从 mixin 和组件自身的数据中读取）
每个组件的
mounted钩子都会执行，控制台输出："Mixin对象mounted"（来自 mixin）"组件本身mounted"（来自组件本身）
页面中显示四个组件：
my-com显示title，同时受 mixin 的影响。my-com1,my-com2,my-com3显示各自的title，分别为"组件1","组件2","组件3"。
🔎8.总结
通过这段代码，我们展示了 Vue 3 中的 mixin 特性。Mixin 使得我们可以将组件共享的逻辑抽象出来，避免重复代码。混入的内容会被添加到所有组件中，在每个组件实例中生效。通过全局 mixin，我们可以方便地为多个组件添加相同的属性、数据和生命周期钩子。