Vue 之混入（mixin）详细介绍

样子2018

已于 2024-09-21 09:40:18 修改

阅读量478

点赞数 3

文章标签： vue.js 前端 javascript ecmascript 前端框架

于 2024-08-22 09:58:00 首次发布

本文链接：https://blog.csdn.net/qq_27781261/article/details/141442059

版权

混入(mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项(如data、methods、mounted、filters等等)。

一、注册使用

1、在main.js中全局配置

import mixin from './mixins'

Vue.mixin(mixin)

2、组件中配置

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立

这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

样子2018

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue 混入（mixin）详细介绍（可复用性、全局混入）

高大志leo的博客

12-13

3万+

基础混入（mixin）提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。基本使用 1、定义一个混入（mixin） let mixin = { created() { console.log("我是mixin里面的created!") }, methods: { hello() { .

vue2之混入（mixin）

LHH的博客

03-01

1535

vue2---mixin用法

1 条评论您还未登录，请先登录后发表或查看评论

Vue中的mixin(混入)

RayShyy的博客

11-13

2107

Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。

Vue 混入（mixin）详细介绍

weixin_48780364的博客

12-21

2387

混入 (mixin) ：是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象（mixins）是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、created、methods 、computed、watch等等。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

vue混入(mixin)的详解

热门推荐

qq_40431896的博客

11-12

1万+

混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 1.钩子函数同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。 var mixin = { created: function () { console.log('混入对象的钩子被调用') } } new Vue({ mixins: [mixin], cre

vue中的mixin混入

fangqi20170515的博客

09-18

1210

这不是Vue的专属的，可以说是一种思想，在很多开发框架中都实现了Mixin。mixin提供了一种非常灵活的方式，来分发Vue组件中可复用的功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样可以减少代码冗余度，也可以让后期维护起来更加容易。

Vue mixin 混入

qq_40792800的博客

07-25

445

创建一个 mixin 混入对象是很简单的，只是我们需要注意的是，配置的键值对，只能是创建组件时传入的配置项，如果，你传了一个其他不存在的属性，组件接收之后，是不会对其解析的，就相当于你在组件内部，定义了一个不存在属性，Vue 底层是不会管这个玩意的。这就看出来很多余了。其次、我们创建的 mixin 对象，在组件中引用的时候，mixin 对象中的键值对会混入该组件的配置详项中，至于是怎么混入的，下面在讲。创建了一个 mixin 对象之后，组件需要使用的时候，就和引入公共组件和公共方法一样。

Vue混入（Vue.mixin）

letianxf的博客

12-22

1602

Vue.mixin

Vue中的mixin混入

qq_51676421的博客

03-09

192

②局部混入：mixin:[ 'hunhe' ] (组件中)①全局混入：Vue.mixin(hunhe) （main.js中）定义混入：mixin.js。功能：可以把多个组件共用的配置提取成一个混入对象。

Vue中的混入mixin使用方法介绍

热爱前端的大三在校生

10-28

1845

数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。一般混入都是在单组件内应用比较合适也可以进行全局注册。

使用vue中的混入mixin优化表单验证插件问题

10-16

接下来将详细探讨如何使用Vue中的混入mixin来优化表单验证插件问题。首先，我们遇到的问题主要集中在使用表单校验插件时的不便之处。每一个需要校验的表单元素都需要添加特定的类名（例如v-check），这无疑增加了...

前端开发：Vue混入(mixin)的使用

软贱开发攻城狮

09-17

2147

在前端开发中，作为开发者关于Vue框架的使用不必多说，Vue的框架也是目前最为好用的框架之一，虽然Vue3.0已经成为了主流版本（Vue2.0和Vue3.0还是有不少差别的），但丝毫不影响开发使用。本篇博文分享一个关于Vue相关的比较重要的知识点----混入(mixin)，该内容在实际开发中比较常用，也比较重要，所以需要灵活运用，尤其是刚接触Vue不久的开发者甚为重要。

vue 使用混入mixin

tttddd888的博客

05-12

315

1、局部混入 1.1 componts文件夹下、新建mixin.js文件(或者新建mixin文件夹，里边包含多种定义的混入方法) // 定义mixins const mixin ={ data(){ return:{ data:"mixins使用", message:"方法2信息" } }, methods:{ testMixin(){ console.log("混入方法测试111", this.data); }, tsetTwo(){ console.lo

Vue3 -- Mixin混入

Sun_blog

07-10

6501

目录什么是Mixin混入使用Mixin混入data使用Mixin混入钩子使用Mixin混入方法使用Mixin混入自定义属性修改优先级局部Mixin全局Mixin总结什么是Mixin混入混入 (mixin) 是一种非常灵活的 Vue 组件中的可复用方式，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。使用Mixin混入data 首先定义Minxin const myMixin = { data(){

Vue2.0混入mixin的简单用法-全局的用法

cider_m的博客

02-17

1237

参数： {Object} mixin 全局用法：全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。注：不推荐在应用代码中使用。 <div id="app"></div>  <script src="....

knowLedge-Vue I18n 是 Vue.js 的国际化插件

最新发布

2301_76671906的博客

09-30

676

Vue 2 中使用 Vue I18n 插件实现中英文切换

18 vue3之自动引入ref插件&深入使用v-model

qq_37550440的博客

09-25

556

TIps 在Vue3 v-model 是破坏性更新的 v-model在组件里面也是很重要的 v-model 其实是一个语法糖通过props 和 emit组合而成的默认值的改变 prop：value -> modelValue；事件：input -> update:modelValue； v-bind 的 .sync 修饰符和组件的 model 选项已移除新增支持多个v-model 新增支持自定义修饰符 Modifiers

Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统

abo2022的博客

09-30

749

ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.

Vue实战教程：如何用JS封装一个可复用的Loading组件

Jiaberrr的博客

09-28

439

通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。

vue中的mixin混入用法

03-20

在Vue中，mixin（混入）是一种用于复用组件选项的方式。通过使用mixin，可以将一组选项混入到多个组件中，从而实现代码的复用和组件的扩展。具体使用方法如下： 1. 创建一个mixin对象，可以包含任意的组件选项，例如data、methods、computed等。 2. 在需要使用mixin的组件中，通过mixins选项将mixin对象引入。 3. 引入的mixin对象中的选项将与组件自身的选项进行合并，如果有冲突，则以组件自身的选项为准。下面是一个示例： ```javascript // 定义一个mixin对象 var myMixin = { data() { return { message: 'Hello, mixin!' } }, methods: { greet() { console.log(this.message); } } } // 使用mixin Vue.component('my-component', { mixins: [myMixin], created() { this.greet(); // 输出：Hello, mixin! } }) // 创建Vue实例 new Vue({ el: '#app', mixins: [myMixin], created() { this.greet(); // 输出：Hello, mixin! } }) ```