Vue 详解mixins混入用法大全

2024-10-01 08:19:46

前言

当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性

一、什么是Mixins？

mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

二、什么时候使用Mixins？

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

三、如何创建Mixins？

在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象

四、如何使用Mixins？

在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可

五、Mixins的特点

【5.1】方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。

①首先我们在混合对象myMixins.js中定义一个age字段和getAge方法

export const myMixins = {
components:{},
data() {
return {
age: 18,
}
},
mounted() {
this.getAge()
},
methods: {
getAge() {
console.log(this.age)
}
}
}

② 组件1中对num进行+1操作

import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
created() {
this.age++
},
}

③组件2不进行操作

export default {
mixins: [myMixins],
data() {
return {}
},
}

④我们分别切换到两个页面，查看控制台输出。会发现组件1改变了age里面的值，组件2中age值还是混合对象的初始值，并没有随着组件1的增加而改变

【5.2】引入mixins后组件会对其进行合并，将mixins中的数据和方法拓展到当前组件中来，在合并的过程中会出现冲突，接下来我们详细了解Mixins合并冲突

六、Mixins合并冲突

【6.1】值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的

①我们在混入对象增加age属性、getAge1方法和getAge2方法

// myMixins.js
export const myMixins = {
components:{},
data() {
return {
age: 18,
}
},
methods: {
getAge1() {
console.log("age1 from mixins =", this.age )
},
getAge2() {
console.log("age2 from mixins =", this.age )
},
}
}

②我们在引入了myMixins文件的组件中，增加age属性、getAge1方法和getAge3方法

// template.vue
import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {
age: 20,
}
},
mounted() {
this.getAge1();
this.getAge2();
this.getAge3();
},
methods: {
getAge1() {
console.log('age1 from template =', this.age)
},
getAge3() {
console.log('age3 from template =', this.age)
},
}
}

③我们会发现，组件中的age覆盖了混合对象的age，组件的getAge1方法覆盖了混合对象的getAge1方法

【6.2】值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

七、与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

八、与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

到此这篇关于Vue 详解mixins混入用法大全的文章就介绍到这了,更多相关Vue mixins混入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解Vue.js Mixins 混入使用

Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h
深入了解Vue.js 混入（mixins）

混入 (mixins)定义了一部分可复用的方法或者计算属性.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 来看一个简单的实例: var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() }, methods: { startmix
Vue混入mixins滚动触底的方法

前言在app端常常看到类似加载数据的动画,接下来我们来实现滚动触底加载动画提示,以及如何复用这些逻辑. 如何判断滚动触底来看下几张图: 情况一: 当文档高度还为超过可视区域高度时,不存在滚动,所以也没有滚动触底情况二: 当文档高度超过可视区域的高度时,还有剩余的文档没有滚动完,也就是说可视区域高度 + 滚动高度 < 文档高度 ,此时没有达到滚动触底的条件情况三: 文档高度大于可视区域,并且滚动到文档底部, 也就是说可视区域高度 + 滚动高度 = 文档高度判断是否滚动到底经过上
Vue中的混入的使用(vue mixins)

使用场景: 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码. 选项合并 var mixin = { data: function () { return { message: 'hello' } }, created:function(){ console.log('我是mixins中的created') }, methods:{ show:function(num){ console
Vue之Mixins(混入)的使用方法

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行"合并". 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先. var Mymixin = { data: function(){ return { message: 'hello', foo: 'ab
Vue 详解mixins混入用法大全

目录前言一.什么是Mixins? 二.什么时候使用Mixins? 三.如何创建Mixins? 四.如何使用Mixins? 五.Mixins的特点六.Mixins合并冲突七.与vuex的区别八.与公共组件的区别前言当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixin
详解template标签用法(含vue中的用法总结)

一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了display:none;属性.  <template><div>我是template</div
Node.js API详解之 querystring用法实例分析

本文实例讲述了Node.js API详解之 querystring用法.分享给大家供大家参考,具体如下: Node.js API详解之 querystring querystring模块提供了一些实用函数,用于解析与格式换URL查询字符串通过 const querystring = require('querystring'); 的方式引用querystrings模块目录: querystring.escape(str) querystring.unescape(str) querystri
Node.js API详解之 string_decoder用法实例分析

本文实例讲述了Node.js API详解之 string_decoder用法.分享给大家供大家参考,具体如下: string_decoder 模块提供了一个 API,用于把 Buffer 对象解码成字符串. 对于参数末尾不完整的多字节字符,string_decoder会将其保存在内部的buffer中,当再次解码时,补充到参数开头. 通过 const { StringDecoder } = require('string_decoder'); 的方式引用string_decoder模块. 目录:
详解C++ thread用法总结

1,简介 C++11中加入了<thread>头文件,此头文件主要声明了std::thread线程类.C++11的标准类std::thread对线程进行了封装,定义了C++11标准中的一些表示线程的类.用于互斥访问的类与方法等.应用C++11中的std::thread便于多线程程序的移值. std::thread类成员函数: (1).get_id:获取线程ID,返回一个类型为std::thread::id的对象. (2).joinable:检查线程是否可被join.检查thread对象是否标识一
详解Linux重定向用法

相信大家平时都会有需要复制粘贴数据的时候,如果是打开文件进行复制粘贴,就不可避免的需要较多的鼠标与键盘的操作,就会比较繁琐.那么有没有可以省掉这些繁琐操作的复制粘贴的方法呢? 答案是肯定的,那就是重定向.重定向是一种高效的方法,无需大量的鼠标与键盘操作就可以完成数据的转移.重定向可以分为输入重定向以及输出重定向这两种类型.由于所有程序都有输入或者输出,因此输入和输出的重定向是任何编程语言或脚本语言都自带的功能. 每当你与计算机交互时,重定向就必然会发生.学会使用重定向,不仅可以让你与计算机更好地
R语言函数详解及实例用法

函数是一组组合在一起以执行特定任务的语句. R 语言具有大量内置函数,用户可以创建自己的函数. 在R语言中,函数是一个对象,因此R语言解释器能够将控制传递给函数,以及函数完成动作所需的参数. 该函数依次执行其任务并将控制返回到解释器以及可以存储在其他对象中的任何结果. 函数定义使用关键字函数创建 R 语言的函数. R 语言的函数定义的基本语法如下 function_name <- function(arg_1, arg_2, ...) { Function body } 函数组件函数的不同部
Java Mybatis框架增删查改与核心配置详解流程与用法

目录 Mybatis简介 Mybatis开发步骤: Mybatis的映射文件概述 Mybatis的增删改查操作 MyBatis的核心配置文件概述 MyBatis核心配置文件层级关系 MyBatis常用配置解析 Mybatis相应API 原始JDBC操作原始jdbc操作(查询数据) 原始jdbc操作(插入数据) 原始jdbc操作的分析原始jdbc开发存在的问题如下: ①数据库连接创建.释放频繁造成系统资源浪费从而影响系统性能 ②sql 语句在代码中硬编码,造成代码不易维护,实际应用sql变化的可
java 方法重写与权限修饰符以及多态和抽象类详解概念和用法

1.方法重写子类写和父类一样的方法定义 public void call(){ System.out.println("输出文字"); //父类的方法 } public void call(){ System.out.println("helloworld"); } //子类的方法重写父类方法时,容易写错名字怎么办? 加个@Override 注解如果报错,说明重写父类方法时,写错了 @Override: @Override public void call()
vue中的mixins混入使用方法

目录作用使用方法全局混入局部混入作用用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术,使用这个技术我们可以把需要复用的内容封装成一个vue组件,方便下次使用方便使用方法首先在src中去创建一个自己的文件夹,然后把要封装的内容放入到这个文件夹,方便后续的调用 let mymixin={ methods:{ handleBtn(){ alert('封装的内容已经触发!') } } } export default mymixin 全局混入全局混入就是我们可以把封装好的