毕业设计可以做自己的网站吗,石家庄ui设计公司,中国展陈公司前十名,wordpress管理员信息在哪标题详情作者简介愚公搬代码头衔华为云特约编辑#xff0c;华为云云享专家#xff0c;华为开发者专家#xff0c;华为产品云测专家#xff0c;CSDN博客专家#xff0c;CSDN商业化专家#xff0c;阿里云专家博主#xff0c;阿里云签约作者#xff0c;腾讯云优秀博主华为云云享专家华为开发者专家华为产品云测专家CSDN博客专家CSDN商业化专家阿里云专家博主阿里云签约作者腾讯云优秀博主腾讯云内容共创官掘金优秀博主亚马逊技领云博主51CTO博客专家等。近期荣誉2022年度博客之星TOP22023年度博客之星TOP22022年华为云十佳博主2023年华为云十佳博主2024年华为云十佳博主等。博客内容.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。欢迎点赞、✍评论、⭐收藏 文章目录 前言一、自定义组件的插槽Mixin1.HTML 部分解析2.JavaScript 部分解析3.全局 Mixin 设置4.组件定义和注册4.1 组件 my-com使用了 Mixin4.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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue组件Mixin/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
bodydiv idApplicationmy-com/my-commy-com1 title组件1/my-com1my-com2 title组件2/my-com2my-com3 title组件3/my-com3/divscript.../script
/body
/htmldiv idApplicationVue 应用的挂载容器所有 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 Cconst d dreturn { c, d }},created() {// a, b, c, d 都存在console.log(this.a, this.b, this.c, this.d)},mounted() {console.log(组件本身mounted)},template: div styleborder: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 styleborder:red solid 2px;{{title}}/div
}const com2 {template: div styleborder:blue solid 2px;{{title}}/div
}const com3 {template: div styleborder: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 应用挂载到 idApplication 的 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。 8.总结
通过这段代码我们展示了 Vue 3 中的 mixin 特性。Mixin 使得我们可以将组件共享的逻辑抽象出来避免重复代码。混入的内容会被添加到所有组件中在每个组件实例中生效。通过全局 mixin我们可以方便地为多个组件添加相同的属性、数据和生命周期钩子。
