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

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

news 2025/8/8 7:36:06
标题详情
作者简介愚公搬代码
头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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.代码逻辑总结

  1. 全局 Mixin：使用 App.mixin 定义了一个全局的混入（mixin），这个混入包含了：

    • 所有组件都有一个 title 属性。
    • 所有组件都拥有数据 a, b, c。
    • 所有组件都拥有 mounted() 钩子，且会输出 "Mixin对象mounted"。

  2. 组件 my-com：

    • 使用了 Vue 3 的 Composition API，其中定义了 c 和 d 数据。
    • 在 created() 钩子中，组件访问了从混入中继承的 a, b, c，以及组件自身的 d 数据，打印到控制台。
    • 在 mounted() 钩子中，打印 "组件本身mounted"。

  3. 组件 my-com1, my-com2, my-com3：

    • 这三个组件没有使用 mixin，只有一个 title 属性，在模板中展示该值。

  4. 组件渲染：

    • my-com 组件会输出 title，并且其行为受到 mixin 的影响，能访问到 a, b, c 数据。
    • my-com1, my-com2, my-com3 组件也会显示 title，但它们没有 mixin，因此只接收 title。

🔎7.最终输出

  1. 在浏览器控制台，my-com 组件在创建时会输出：

    • a b c d（从 mixin 和组件自身的数据中读取）

  2. 每个组件的 mounted 钩子都会执行，控制台输出：

    • "Mixin对象mounted"（来自 mixin）
    • "组件本身mounted"（来自组件本身）

  3. 页面中显示四个组件：

    • my-com 显示 title，同时受 mixin 的影响。
    • my-com1, my-com2, my-com3 显示各自的 title，分别为 "组件1", "组件2", "组件3"。

在这里插入图片描述

🔎8.总结

通过这段代码，我们展示了 Vue 3 中的 mixin 特性。Mixin 使得我们可以将组件共享的逻辑抽象出来，避免重复代码。混入的内容会被添加到所有组件中，在每个组件实例中生效。通过全局 mixin，我们可以方便地为多个组件添加相同的属性、数据和生命周期钩子。

http://www.lryc.cn/news/528112.html

相关文章：

  • 大一计算机的自学总结：异或运算
  • 通过protoc工具生成proto的pb.go文件以及使用protoc-go-inject-tag工具注入自定义标签
  • C语言练习（29）
  • Android实训九 数据存储和访问
  • 实验一---典型环节及其阶跃响应---自动控制原理实验课
  • SOME/IP--协议英文原文讲解2
  • matlab中，fill命令用法
  • 【Linux】Linux C判断两个IPv6地址是否有包含关系
  • 【玩转全栈】----Django基本配置和介绍
  • mysql 学习6 DML语句，对数据库中的表进行 增 删 改 操作
  • 自动化运维在云环境中的完整实践指南
  • 一分钟搭建promehteus+grafana+alertmanager监控平台
  • 【10.2】队列-设计循环队列
  • 设置jmeter界面图标字体大小
  • Xposed-Hook
  • 设计模式Python版 原型模式
  • QT：图像上绘制图形
  • GPU上没程序在跑但是显存被占用
  • wordpress代码结构解析
  • 【Unity3D】实现2D小地图效果
  • 关联传播和 Python 和 Scikit-learn 实现
  • https数字签名手动验签
  • LeetCode：62.不同路径
  • 如果我想设计一款复古风格的壁纸，应该选什么颜色？
  • 【数据结构】树的基本：结点、度、高度与计算
  • 【Pytest】生成html报告中，中文乱码问题解决方案
  • week08_文本匹配任务
  • JUC--ConcurrentHashMap底层原理
  • 【2024年华为OD机试】(C卷,200分)- 推荐多样性 （JavaScriptJava PythonC/C++）
  • 【教学类-89-01】20250127新年篇01—— 蛇年红包（WORD模版）