初识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.myOption
    if (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. 应用实例： 混入可以用于共享身份验证逻辑、表单验证规则、全局工具函数等多种场景，提高代码的复用性和可维护性。

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/595970.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

npy文件如何追加数据？

npy文件如何追加数据？

.npy 文件是 NumPy 库用于存储数组数据的二进制格式&#xff0c;它包含一个描述数组结构的头部信息和实际的数据部分。直接追加数据到现有的 .npy 文件并不像文本文件那样直接&#xff0c;因为需要手动修改文件头部以反映新增数据后的数组尺寸&#xff0c;并且要确保数据正确地…
阅读更多...
【哈希表】Leetcode 14. 最长公共前缀

【哈希表】Leetcode 14. 最长公共前缀

题目讲解 14. 最长公共前缀 算法讲解 我们使用当前第一个字符串中的与后面的字符串作比较&#xff0c;如果第一个字符串中的字符没有出现在后面的字符串中&#xff0c;我们就直接返回&#xff1b;反之当容器中的所有字符串都遍历完成&#xff0c;说明所有的字符串都在该位置…
阅读更多...
从简单逻辑到复杂计算：感知机的进化与其在现代深度学习和人工智能中的应用（上）

从简单逻辑到复杂计算：感知机的进化与其在现代深度学习和人工智能中的应用（上）

文章目录 引言第一章&#xff1a;感知机是什么第二章&#xff1a;简单逻辑电路第三章&#xff1a;感知机的实现3.1 简单的与门实现3.2 导入权重和偏置3.3 使用权重和偏置的实现实现与门实现与非门和或门 文章文上下两节 从简单逻辑到复杂计算&#xff1a;感知机的进化与其在现代…
阅读更多...
微信公众号 点击显示答案 操作步骤

微信公众号 点击显示答案 操作步骤

1、右键进入检查模式 2、ctrlf查找html元素 3、添加答案区域代码 添加答案区域代码后&#xff0c;可以直接在页面进行格式调整 <!-- 此处height控制显示区域高度 --> <section style"height: 1500px;overflow-x: hidden;overflow-y: auto;text-align: center;b…
阅读更多...
博客网站SpringBoot+Vue项目练习

博客网站SpringBoot+Vue项目练习

博客网站SpringBootVue简单案例 前言 学了vue后一直没用找到应用的机会&#xff0c;在Github上找到了一个看起来比较友好的项目&#xff08;其实具体代码我还没看过&#xff09;。而且这个项目作者的readme文档写的也算是比较好的了。 项目链接&#xff1a;https://github.c…
阅读更多...
基于 Linux 自建怀旧游戏之 - 80 款 H5 精品小游戏合集

基于 Linux 自建怀旧游戏之 - 80 款 H5 精品小游戏合集

1&#xff09;简介 最近又找到了一款宝藏游戏资源分享给大家&#xff0c;包含 80 款 H5 精品小游戏&#xff0c;都是非常有趣味耐玩的游戏&#xff0c;比如 植物大战僵尸、捕鱼达人、贪吃蛇、俄罗斯方块、斗地主、坦克大战、双人五子棋、中国象棋 等等超级好玩的 H5 小游戏&…
阅读更多...
ai续写软件哪个好？盘点3款经典好用的！

ai续写软件哪个好？盘点3款经典好用的！

随着科技的不断发展&#xff0c;AI续写软件逐渐成为了许多内容创作者、学生、研究人员等的得力助手。这类软件能够通过机器学习和自然语言处理技术&#xff0c;为用户提供高质量的文本续写服务。但市场上众多的AI续写软件让人眼花缭乱&#xff0c;那么&#xff0c;究竟哪款AI续…
阅读更多...
0506_IO1

0506_IO1

思维导图&#xff1a; 练习&#xff1a; 有如下结构体 struct Student{ char name[16]; int age; double math_score; double chinese_score; double english_score; double physics_score; double chemistry_score; double bio_score; }; 申请该结构体数组&#xff0c;容量为…
阅读更多...
AVL树浅谈

AVL树浅谈

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;本篇文章给大家介绍AVL树。 基本概念 AVL树&#xff08;Adelson-Velsky和Landis树&#xff09;是一种自平衡的二叉搜索树&#xff0c;得名于其发明者G. M. Adelson-Velsky和E. M. Landis。在AVL树中&#xff0c;任何节点的…
阅读更多...
活动回放 | 如何进行全增量一体的异构数据库实时同步

活动回放 | 如何进行全增量一体的异构数据库实时同步

以 AI领域为代表的新技术不断涌现&#xff0c;新的应用风口也逐渐清晰。为了加紧跟上技术发展的步伐&#xff0c;越来越多的企业开始着手&#xff0c;对仍以传统关系型数据库为主的应用后端进行现代化升级。 这就涉及到如何在不影响并保持现有业务系统正常运转的前提下&#xf…
阅读更多...
专注 APT 攻击与防御—基于UDP发现内网存活主机

专注 APT 攻击与防御—基于UDP发现内网存活主机

UDP简介&#xff1a; UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的协议&#xff0c;在第四层-传输层&#xff0c;处于IP协议的上一层。UDP有不提供数据包分组、组装和不能对数据包进行排序的缺点&#xff0c;也就是说&#xff0c;当报文发送之后&#xf…
阅读更多...
Android 状态栏WiFi图标的显示逻辑

Android 状态栏WiFi图标的显示逻辑

1. 状态栏信号图标 1.1 WIFI信号显示 WIFI信号在状态栏的显示如下图所示 当WiFi状态为关闭时&#xff0c;状态栏不会有任何显示。当WiFi状态打开时&#xff0c;会如上图所示&#xff0c;左侧表示有可用WiFi&#xff0c;右侧表示当前WiFi打开但未连接。 当WiFi状态连接时&#x…
阅读更多...
SpringBoot整合rabbitmq使用案例

SpringBoot整合rabbitmq使用案例

RocketMQ&#xff08;二十四&#xff09;整合SpringBoot SpringBoot整合rabbitmq使用案例 一 SpringBoot整合RocketMQ实现消息发送和接收消息生产者1&#xff09;添加依赖2&#xff09;配置文件3&#xff09;启动类4&#xff09;测试类 消息消费者1&#xff09;添加依赖2&…
阅读更多...
python 中如何匹配字符串

python 中如何匹配字符串

python 中如何匹配字符串&#xff1f; 1. re.match 尝试从字符串的起始位置匹配一个模式&#xff0c;如果不是起始位置匹配成功的话&#xff0c;match()就返回none。 import re line"this hdr-biz 123 model server 456" patternr"123" matchObj re.matc…
阅读更多...
iconfont_vue小程序中使用

iconfont_vue小程序中使用

1.前三步就是简单下载&#xff0c;详细可看这篇 vue管理系统导航中添加新的iconfont的图标-CSDN博客 2.引用有点区别&#xff1a;在App中引用 3.uni-icons写法 <uni-icons custom-prefix"iconfont" type"icon-zhengjian" size"23"></un…
阅读更多...
情感视频素材怎么来的？8个视频素材库免费下载安装

情感视频素材怎么来的？8个视频素材库免费下载安装

在今天这个视觉内容对于连接和影响观众至关重要的时代&#xff0c;选择适合的视频素材变得极为关键。优质的视频素材可以极大提升您的内容质量&#xff0c;无论是在增加社交媒体的吸引力、提升商业广告的效果&#xff0c;还是丰富教育材料的表现力。以下是一些全球顶级的视频素…
阅读更多...
基于 Llama-Index、Llama 3 和 Qdrant，构建一个 RAG 问答系统！

基于 Llama-Index、Llama 3 和 Qdrant，构建一个 RAG 问答系统！

构建一个使用Llama-Index、Llama 3和Qdrant的高级重排-RAG系统 尽管大型语言模型&#xff08;LLMs&#xff09;有能力生成有意义且语法正确的文本&#xff0c;但它们面临的一个挑战是幻觉。 在LLMs中&#xff0c;幻觉指的是它们倾向于自信地生成错误答案&#xff0c;制造出看似…
阅读更多...
Stateflow基础知识笔记

Stateflow基础知识笔记

01--Simulink/Stateflow概述 Stateflow是集成于Simulink中的图形化设计与开发工具&#xff0c;主要 用于针对控制系统中的复杂控制逻辑进行建模与仿真&#xff0c;或者说&#xff0c; Stateflow适用于针对事件响应系统进行建模与仿真。 Stateflow必须与Simulink联合使用&#…
阅读更多...
一个年薪30w软件测试员的职业规划，献给还在迷茫中的朋友

一个年薪30w软件测试员的职业规划，献给还在迷茫中的朋友

先抛出一个观点 &#xff0c; 那些&#xff0c;担心30岁后&#xff0c;35岁后&#xff0c;40岁后&#xff0c;无路可走的&#xff1b;基本属于能力不够、或者思维太局限 。 总之&#xff0c;瞎担心 / 不长进 。 具体&#xff0c;见下面正文 。 曾经&#xff0c;在16年&#xff…
阅读更多...
开发环境待

开发环境待

一 web开发环境搭建 1 web开发环境概述 所谓web开发,指的就是从网页中向后端程序发送请求.与后端程序进行交互. 流程图: 1,Web服务器是指驻留于因特网上某种类型计算机的程序. 2, 可以向浏览器等Web客户端提供文档&#xff0c;也可以放置网站文件&#xff0c;让全世界 浏览…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站