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

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》030-自定义组件的插槽Mixin

article 2025/1/30 16:36:02

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

文章目录

🚀前言
🚀一、自定义组件的插槽Mixin
- 🔎1.HTML 部分解析
- 🔎2.JavaScript 部分解析
- 🔎3.全局 Mixin 设置
- 🔎4.组件定义和注册
- - 🦋4.1 组件 `my-com`（使用了 Mixin）
  - 🦋4.2 组件 `my-com1`, `my-com2`, `my-com3`（没有使用 Mixin）
- 🔎5.组件注册和挂载
- 🔎6.代码逻辑总结
- 🔎7.最终输出
- 🔎8.总结

🚀前言

在 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"。
组件 my-com1, my-com2, my-com3：
- 这三个组件没有使用 mixin，只有一个 title 属性，在模板中展示该值。
组件渲染：
- 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"。