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

标题详情
作者简介愚公搬代码
头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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.mzph.cn/diannao/68406.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于SpringBoot电脑组装系统平台系统功能实现六

基于SpringBoot电脑组装系统平台系统功能实现六

一、前言介绍&#xff1a; 1.1 项目摘要 随着科技的进步&#xff0c;计算机硬件技术日新月异&#xff0c;包括处理器&#xff08;CPU&#xff09;、主板、内存、显卡等关键部件的性能不断提升&#xff0c;为电脑组装提供了更多的选择和可能性。不同的硬件组合可以构建出不同类…
阅读更多...
网络工程师 （5）系统可靠性

网络工程师 （5）系统可靠性

前言 系统可靠性是指系统在规定的条件和规定的时间内&#xff0c;完成规定功能的能力。这种能力不仅涵盖了系统本身的稳定性和耐久性&#xff0c;还涉及了系统在面对各种内外部干扰和故障时的恢复能力和容错性。系统可靠性是评价一个系统性能优劣的关键指标之一&#xff0c;对于…
阅读更多...
【2024年华为OD机试】(C卷,200分)- 推荐多样性 （JavaScriptJava PythonC/C++）

【2024年华为OD机试】(C卷,200分)- 推荐多样性 （JavaScriptJava PythonC/C++）

一、问题描述 问题描述 我们需要从多个已排序的列表中选取元素&#xff0c;以填充多个窗口。每个窗口需要展示一定数量的元素&#xff0c;且元素的选择需要遵循特定的穿插策略。具体来说&#xff0c;我们需要&#xff1a; 从第一个列表中为每个窗口选择一个元素&#xff0c;…
阅读更多...
损失函数 Loss Function

损失函数 Loss Function

分类问题和回归问题常使用的损失函数如下&#xff1a; 分类问题 交叉熵损失函数&#xff08;Cross-Entropy Loss&#xff09;&#xff1a;用于衡量两个概率分布之间的差异&#xff0c;在多分类问题中广泛应用。 ce_loss nn.CrossEntropyLoss() 回归问题 均方误差损失函数&…
阅读更多...
Chameleon(变色龙) 跨平台编译C文件，并一次性生成多个平台的可执行文件

Chameleon(变色龙) 跨平台编译C文件，并一次性生成多个平台的可执行文件

地址:https://github.com/MartinxMax/Chameleon Chameleon 跨平台编译C文件&#xff0c;并一次性生成多个平台的可执行文件。可以通过编译Chameleon自带的.C文件反向Shell生成不同平台攻击载荷。 登录 & 代理设置 按照以下步骤设置 Docker 的代理&#xff1a; 创建配置目…
阅读更多...
DFFormer实战：使用DFFormer实现图像分类任务（二）

DFFormer实战：使用DFFormer实现图像分类任务（二）

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…
阅读更多...
几种K8s运维管理平台对比说明

几种K8s运维管理平台对比说明

目录 深入体验**结论**对比分析表格**1. 功能对比****2. 用户界面****3. 多租户支持****4. DevOps支持** 细对比分析1. **Kuboard**2. **xkube**3. **KubeSphere**4. **Dashboard****对比总结** 深入体验 KuboardxkubeKubeSphereDashboard 结论 如果您需要一个功能全面且适合…
阅读更多...
DeepSeek API 的获取与对话示例

DeepSeek API 的获取与对话示例

代码文件下载&#xff1a;Code 在线链接&#xff1a;Kaggle | Colab 文章目录 注册并获取API环境依赖设置 API单轮对话多轮对话流式输出更换模型 注册并获取API 访问 https://platform.deepseek.com/sign_in 进行注册并登录&#xff1a; 新用户注册后将赠送 10 块钱余额&#…
阅读更多...
基于STM32的循迹小车设计与实现

基于STM32的循迹小车设计与实现

1 系统方案设计 根据系统设计功能&#xff0c;展开基于STM32的循迹小车设计&#xff0c;整体设计框图如图2.1所示。系统采用STM32单片机作为控制器,通过L298驱动器控制两个直流电机实现对小车的运动控制&#xff0c;两路红外模块实现黑线的检测&#xff0c;HC-SR04超声波模块实…
阅读更多...
Docker/K8S

Docker/K8S

文章目录 项目地址一、Docker1.1 创建一个Node服务image1.2 volume1.3 网络1.4 docker compose 二、K8S2.1 集群组成2.2 Pod1. 如何使用Pod(1) 运行一个pod(2) 运行多个pod 项目地址 教程作者&#xff1a;教程地址&#xff1a; https://www.bilibili.com/video/BV1Zn4y1X7AZ?…
阅读更多...
算法每日双题精讲 —— 二分查找（寻找旋转排序数组中的最小值，点名）

算法每日双题精讲 —— 二分查找（寻找旋转排序数组中的最小值，点名）

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#x1f4aa; 在算法的…
阅读更多...
【踩坑日常，已解决】彻底修改IDEA项目的JDK版本，8改为17

【踩坑日常，已解决】彻底修改IDEA项目的JDK版本，8改为17

三处修改彻底解决IDEA中JDK版本不对问题&#xff08;8改为17&#xff09; 文章目录 三处修改彻底解决IDEA中JDK版本不对问题&#xff08;8改为17&#xff09;第一处第二处第三处 第一处 setting -> Build, Execution, Deployment -> Java Compiler -> Target bytecod…
阅读更多...
redis的分片集群模式

redis的分片集群模式

redis的分片集群模式 1 主从哨兵集群的问题和分片集群特点 主从哨兵集群可应对高并发写和高可用性&#xff0c;但是还有2个问题没有解决&#xff1a; &#xff08;1&#xff09;海量数据存储 &#xff08;2&#xff09;高并发写的问题 使用分片集群可解决&#xff0c;分片集群…
阅读更多...
Nuxt：利用public-ip这个npm包来获取公网IP

Nuxt：利用public-ip这个npm包来获取公网IP

目录 一、安装public-ip包1.在Vue组件中使用2.在Nuxt.js插件中使用public-ip 一、安装public-ip包 npm install public-ip1.在Vue组件中使用 你可以在Nuxt.js的任意组件或者插件中使用public-ip来获取公网IP。下面是在一个Vue组件中如何使用它的例子&#xff1a; <template…
阅读更多...
搭建Spring Boot开发环境

搭建Spring Boot开发环境

JDK&#xff08;1.8及以上版本&#xff09; Apache Maven 3.6.0 修改settings.xml 设置本地仓库位置 <localRepository>D:/repository</localRepository> 设置远程仓库镜像 <mirror><id>alimaven</id><name>aliyun maven</name&…
阅读更多...
智慧校园在职业学校的实施与展望

智慧校园在职业学校的实施与展望

随着信息技术的发展&#xff0c;智慧校园的概念逐渐走进人们的视野。智慧校园不仅是一个技术层面的概念&#xff0c;更是教育理念的一次革新。对于职业教育而言&#xff0c;智慧校园的应用更是具有重要意义。通过引入物联网、大数据等先进技术&#xff0c;可以实现教学资源的高…
阅读更多...
Excel中LOOKUP函数的使用

Excel中LOOKUP函数的使用

文章目录 VLOOKUP&#xff08;垂直查找&#xff09;&#xff1a;HLOOKUP&#xff08;水平查找&#xff09;&#xff1a;LOOKUP&#xff08;基础查找&#xff09;&#xff1a;XLOOKUP&#xff08;高级查找&#xff0c;较新版本Excel提供&#xff09;&#xff1a; 在Excel中&…
阅读更多...
React第二十六章(createPortal)

React第二十六章(createPortal)

createPortal 注意这是一个API&#xff0c;不是组件&#xff0c;他的作用是&#xff1a;将一个组件渲染到DOM的任意位置&#xff0c;跟Vue的Teleport组件类似。 用法 import { createPortal } from react-dom;const App () > {return createPortal(<div>小满zs<…
阅读更多...
k8s 蓝绿发布、滚动发布、灰度发布

k8s 蓝绿发布、滚动发布、灰度发布

在Kubernetes&#xff08;k8s&#xff09;中&#xff0c;蓝绿发布、滚动发布、灰度发布&#xff08;金丝雀发布&#xff09;是三种常见的应用部署和更新策略。下面将分别对这几种发布方式进行说明&#xff0c;并给出相应的例子。 蓝绿发布 蓝绿发布是一种无缝切换版本的部署策…
阅读更多...
【R语言】数学运算

【R语言】数学运算

一、基础运算 R语言中能实现加、减、乘、除、求模、取整、取绝对值、指数、对数等运算。 x <- 2 y <- 10 # 求模 y %% x # 整除 y %/% x # 取绝对值 abs(-x) # 指数运算 y ^x y^1/x #对数运算 log(x) #log()函数默认情况下以 e 为底 双等号“”的作用等同于identical(…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023