初识Vue-混入mixins（详解分发 Vue 组件中可复用功能）

2024-05-06 22:36
文章标签 javascript 初识 组件 详解 功能 vue frontend 复用 分发 mixins 混入

本文主要是介绍初识Vue-混入mixins（详解分发 Vue 组件中可复用功能），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、mixins混入介绍

概念

特点

功能

用法

应用

 二、mixins混入语法

1.简单示例

2.选项合并

3.全局混入

4.混入对象选项：

5.注意事项：

三、mixins混入应用实例

1.身份验证逻辑混入

2.表单验证混入

3.全局工具函数混入

 四、总结

一、mixins混入介绍

概念

混入是一种将可复用功能注入到 Vue 组件中的方式，它允许你将组件中的一些选项混合到多个组件中。

特点

  • 可复用性： 可以定义一次，然后在多个组件中重复使用。
  • 灵活性： 可以根据需要在不同的组件中混合不同的选项。
  • 优先级： 如果组件和混入对象具有相同的选项，则组件选项将会覆盖混入对象的选项。

功能

  • 数据： 可以在混入对象中定义数据属性。
  • 方法： 可以在混入对象中定义方法，这些方法将被注入到组件中。
  • 生命周期钩子： 可以在混入对象中定义生命周期钩子函数，它们将与组件的生命周期钩子函数合并。
  • 计算属性、观察者和指令： 你可以在混入对象中定义计算属性、观察者和指令。
  • 组件配置： 你还可以在混入对象中定义组件的配置选项。

用法

  1. 全局混入： 可以在 Vue 实例创建之前通过 Vue.mixin() 全局注册一个混入，这样在所有组件中都可以使用。
  2. 局部混入： 在组件中使用 mixins 选项来引入一个或多个混入对象。

应用

  • 共享逻辑： 当多个组件需要共享相同的逻辑时，可以将该逻辑封装在一个混入对象中，并在需要时引入。
  • 跨项目复用： 如果有一些通用的功能需要在多个项目中使用，可以将其封装为混入对象，方便在不同的项目中复用。

 二、mixins混入语法

1.简单示例

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

// 定义混入对象
const myMixin = {created() {this.hello()},methods: {hello() {console.log('欢迎来到混入实例-RUNOOB!')}}
}// 定义一个应用，使用混入
const app = Vue.createApp({mixins: [myMixin]
})app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"

2.选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

以下实例中，Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app"></div>
<script type = "text/javascript">
const myMixin = {data() {return {message: 'hello',foo: 'runoob'}}
}const app = Vue.createApp({mixins: [myMixin],data() {return {message: 'goodbye',bar: 'def'}},created() {document.write(JSON.stringify(this.$data)) }
})

输出结果为

{"message":"goodbye","foo":"runoob","bar":"def"}

 同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

const myMixin = {created() {console.log('mixin 对象的钩子被调用')}
}const app = Vue.createApp({mixins: [myMixin],created() {console.log('组件钩子被调用')}
})// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

const myMixin = {methods: {foo() {console.log('foo')},conflicting() {console.log('from mixin')}}
}const app = Vue.createApp({mixins: [myMixin],methods: {bar() {console.log('bar')},conflicting() {console.log('from self')}}
})const vm = app.mount('#app')vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

以上实例，我们调用了以下三个方法：

vm.foo();
vm.bar();
vm.conflicting();

从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

3.全局混入

也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

const app = Vue.createApp({myOption: 'hello!'
})// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({created() {const myOption = this.$options.myOptionif (myOption) {document.write(myOption)}}
})app.mount('#app') // => "hello!"

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

4.混入对象选项：

混入对象可以包含以下选项：

  • 数据（data）： 可以是对象或函数，用于定义组件的数据属性。
  • 方法（methods）： 包含组件的方法。
  • 生命周期钩子（lifecycle hooks）： 包含组件的生命周期钩子函数。
  • 计算属性、观察者和指令： 可以在混入对象中定义计算属性、观察者和指令等组件选项。

5.注意事项：

  • 如果组件和混入对象具有相同的选项，则组件选项将会覆盖混入对象的选项。
  • 当混入对象和组件本身有相同的生命周期钩子函数时，它们都会被调用，混入对象的钩子将在组件自身钩子之前调用。

三、mixins混入应用实例

1.身份验证逻辑混入

如果你的应用有多个需要身份验证的组件，你可以创建一个身份验证逻辑混入对象，并在需要的组件中引入它。这个混入对象可以包含登录、注销等身份验证相关的方法，以及判断用户是否已经登录的逻辑。

const authMixin = {methods: {login() {// 登录逻辑},logout() {// 注销逻辑}},computed: {isAuthenticated() {// 判断用户是否已经登录}}
};Vue.mixin(authMixin);

2.表单验证混入

如果你的应用有多个需要表单验证的组件，你可以创建一个表单验证混入对象，并在需要的组件中引入它。这个混入对象可以包含各种常见的表单验证规则和方法。

const formValidationMixin = {methods: {validateEmail(email) {// 邮箱验证逻辑},validatePassword(password) {// 密码验证逻辑}}
};Vue.mixin(formValidationMixin);

3.全局工具函数混入

如果你的应用中有一些常用的工具函数需要在多个组件中使用，你可以创建一个全局工具函数混入对象，并在需要的组件中引入它。

const utilsMixin = {methods: {formatDate(date) {// 格式化日期},formatCurrency(amount) {// 格式化货币金额}}
};Vue.mixin(utilsMixin);

 四、总结

  1. 混入是什么： 混入是一种Vue.js提供的一种灵活的代码复用方式，允许将一组组件选项合并到一个对象中，然后将其应用到多个组件中。

  2. 全局混入： 可以使用Vue.mixin()在Vue实例创建之前全局注册一个混入，使得混入对象中的选项对所有组件都可用。

  3. 局部混入： 在组件中使用mixins选项引入一个或多个混入对象，使得这些混入对象中的选项对该组件及其子组件可用。

  4. 混入对象选项： 混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。

  5. 选项合并规则： 如果组件和混入对象具有相同的选项，则组件选项将会覆盖混入对象的选项。当混入对象和组件本身有相同的生命周期钩子函数时，它们都会被调用，混入对象的钩子将在组件自身钩子之前调用。

  6. 应用实例： 混入可以用于共享身份验证逻辑、表单验证规则、全局工具函数等多种场景，提高代码的复用性和可维护性。

 

 

这篇关于初识Vue-混入mixins（详解分发 Vue 组件中可复用功能）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/965577。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2