vue混入(mixin)的详解

最新推荐文章于 2024-05-27 11:44:08 发布
最新推荐文章于 2024-05-27 11:44:08 发布
阅读量1.4w 收藏 28
点赞数 12
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40431896/article/details/121287949
版权

混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用。

 //  minxin.js
const mixin = {
  data() {
    return{
      msg1: '我是混入内容1',
      msg2: '我是混入内容2'
    }
  },
  created() {
    console.log(this.msg3)
  }
}
export default mixin;
</script>
...
// 页面组件
<template>
  <div class="header">
    <h1></h1>
  </div>
</template>
<script>
import mixin from './mixins/mixin'
export default {
  mixins: [mixin],
  name: 'Header',
  data(){
    return{
      msg1: '我是组件内容1',
      msg3: '我是组件内容2'
    }
  },
  created() {
      console.log(this.msg2)
      console.log(this.msg1)
  },
}
</script>
  
	// 我是组件内容2
	// 我是混入内容2
	// 我是组件内容1
3.普通方法合并

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

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        methods: {
            mixin: function() {
                console.log('MixinOne')
            },
            mixinTwo: function () {
                console.log('MixinTwo')
            }
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        methods: {
            mixin: function () {
                console.log('component')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
    })
    
	// component
	// MixinTwo
</script>
4.局部混入

在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {
  data() {
    return {
      msg: "hello"
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + ',这是mixin混入方法')
    }
  }
}
export default mixin;

在需要的页面中引入：

<template>
	<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
	mixins: [mixin],
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// hello，这是mixin混入的方法
5.全局混入

在main.js加入以下代码

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

在组件中直接引用：

<template>
	<div>{{msg}}</div>
</template>
<script>
export default {
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// hello，这是mixin混入的方法
</script>
小铁匠95
关注
  • 12
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】详细介绍Vue中的Mixin（混入）
Jacker
09-17 631
然后我们在app组件中通过mixins选项将该Mixin对象注入，从而使app组件也拥有了该Mixin对象的data和methods属性。需要注意的是，如果Mixin对象和组件定义的选项冲突了，组件定义的选项将会覆盖Mixin对象的选项。另外，如果多个Mixin对象包含同名的选项，则最后一个Mixin对象的选项会覆盖前面的选项。在Vue中使用Mixin很简单，只需要创建一个Mixin对象，然后在需要使用该Mixin的组件中通过mixins选项来注入该Mixin对象即可。
Vue 混入（mixin）详细介绍（可复用性、全局混入）
2401_84098088的博客
05-06 775
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue.js 混入（Mixins）高级用法：提升代码复用与灵活性
最新发布
织网的博客
05-27 411
Vue允许开发者自定义选项的合并策略，这对于解决特定场景下的冲突问题非常有用。// 自定义合并逻辑，这里以简单合并数组为例// 混入定义customArray: ['混入项1'],// 组件中使用customArray: ['组件项1'],// 自定义合并策略将自动应用于customArrayVue混入提供了强大的代码复用能力，通过上述高级用法，我们可以更精细地控制混入的使用，解决潜在的冲突问题，同时通过模仿高阶组件的思想，提升组件的灵活性和可维护性。
vue中的mixin的详解及应用场景（收藏需要的时候来看）
常来常往，共同成长
01-02 1826
Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类。Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。
vue中的mixin
lwx33912138的博客
11-22 1204
什么是mixin，mix的优点与缺点，mixin的用法与对mixin的理解
什么是Mixin？带你了解Vue中的Mixin混入
weixin_51225684的博客
06-22 7488
Vue框架现在基本上已经占据了前端的半壁江山，Vue的数据驱动和组件化的思想深入人心。Vue全家桶可能很多小伙伴都比较熟悉，在工作上也用得比较得心应手。但是今天讲的Vue中这个Mixin的用法我相信还有很多小伙伴不知道或者没有用过，或者有些小伙伴接手别人的Vue项目时看到里面有个Mixin文件夹，也会用，但是一直都是云里雾里的状态，今天我们就好好聊聊Mixin，争取以后不在犯迷糊。【相关推荐：vuejs视频教程】官方解释：民间解释：将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入
vue中的mixin是什么? mixin怎么用?
weixin_44265146的博客
07-13 1007
在 Vue 中，可以通过创建 mixin 对象来定义可重用的逻辑，然后将 mixin 对象应用到需要的组件中。// 定义一个可重用的 mixins 对象data() {return {},methods: {// 创建一个组件，并应用 mixins// 调用来自 mixins 的方法});// 创建 Vue 实例new Vue({});在上面的代码中，我们首先定义了一个名为myMixin的 mixins 对象，它包含了一个data对象和一个方法。
Vue — 详解mixins混入使用
Ben_Simons
07-02 1654
前言 当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性 一、什么是Mixins？ mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、compone
Vue 中mixin 的用法详解
08-27
e中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Vue之mixin全局的用法详解
10-18
Vue的全局`mixin`是通过`Vue.mixin()`方法实现的，它接收一个对象作为参数，这个对象包含要混合到所有Vue实例中的属性和方法。例如： ```javascript const mixin = { methods: { formatDate(date, fmt = 'YYYY年M...
使用vue中的混入mixin优化表单验证插件问题
10-16
主要介绍了使用vue中的混入mixin优化表单验证插件,本文是小编给大家总结的一些表单插件的问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue之Mixins(混入)的使用方法
10-16
主要介绍了Vue之Mixins(混入)的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
谈谈vue中mixin的一点理解
08-28
vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。下面给大家谈谈我对vue中mixin的一点理解，需要的朋友参考下吧
【前端知识之Vue】对vue中mixin的理解
weixin_44337386的博客
06-22 2752
本系列主要整理前端面试中需要掌握的知识点。本节介绍对vue中mixin的理解。
vue之mixin混入
我心坚持
02-14 859
功能：把多个组件公用的函数、钩子函数等提取成一个对象，相当于一个共用对象。 定义混入文件，是js文件，例如mixin.js，名字随意起，一般用mixin.js 它可以包含我们组件script项中的任意功能选项，如data、components、methods 、created、computed等等 export default { mounted(){ console.log(1111); }, methods:{ add(){ this.n++ } } } 1、在子组件中
vue中mixin (混入) 的学习
人间草木
10-11 424
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 index.vue <template> <div class="index"> {{msg}} ---- {{msgMixin}} </div&g...
vue中的混合（minix）实例理解
朱宏的博客
09-02 4613
minix 是个什么东西， 就是混合，把你混合给我 浅显表述就是 你说 ： ‘我叫李四’， 我说 ： ‘我叫张三’， 然后把你 混合给我， 就成了 我说 ： ‘我叫张三我叫李四’， 所有解说都在例子里，如下： // minix.js export default { data () { return { ...
vue中mixin的使用
wu_xiao_qing的博客
12-20 2075
作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。 代码如下：mixin中的代码： 使用的组件中的代码：
vue mixin传参
bittingCat的博客
08-05 2886
其实就是把mixin当做一个方法 import { debounce } from '@/utils' export default function MyMixin(params) { const { element1 = '', element2 = '', element3 = '' } = params return { data() { return { $_sidebarElm1: null, $_side
vue的mixin混入使用方法
04-14
对于Vue的mixin混入使用方法，我们可以在Vue组件中使用mixins选项来混入一个或多个mixin对象，从而达到代码复用的目的。具体使用方法如下： 1. 创建一个mixin对象，例如： ``` const myMixin = { created: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值