位置：首页-资讯-前端开发

vue中的mixins混入使用方法

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

mixins

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

mixins理解

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：

父组件 + 子组件 >>> 父组件 + 子组件

mixins：

父组件 + 子组件 >>> new父组件有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。

作用：

用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术，使用这个技术我们可以把需要复用的内容封装成一个vue组件，方便下次使用方便

使用方法

首先在class="lazy" data-src中去创建一个自己的文件夹，然后把要封装的内容放入到这个文件夹，方便后续的调用

let mymixin={
    methods:{
        handleBtn(){
            alert('封装的内容已经触发！')
        }
    }
}
export default mymixin

全局混入

全局混入就是我们可以把封装好的这个组件在main.js中全局注册，方便在任何地方使用

import myMixins from "./mixins/index.js"
// 全局混入
Vue.mixin(myMixins)

局部混入

也就是引用的复用内容只能在当前组件中生效

<template>
  <button @click="handleBtn">点我触发</button>
</template>
<script>
import myMixins from '@/mixin.js'
export default {
    mixins:[myMixins]
}
</script>
<style>
</style>

这样就实现了一个简单的混入，减少代码的复用性，大大加强了开发效率，你就可以安心的考虑业务，而不是不停的敲代码

mixins的使用

方法的复用

html

<div id="app">
    <child></child>
    <kid></kid>
</div>

Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})
Vue.component('kid',{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log('Kid foo()'+this.msg++)
        }
    }
})

在借助mixins之前，在两个不同的组件的组件中调用foo方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助mixins，则变得十分简单：

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

虽然此处，两个组件用可以通过this.msg引用mixins中定义的msg，但是，小编尝试过，两个组件引用的并不是同一个msg，而是各自创建了一个新的msg。如果在组件中定义相同的data，则此处会引用组件中的msg，而非mixins中的。

方法的覆盖

如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。

var child=Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    mixins:[mixin],
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})

此时，若单击h1标签，则在控制台中打印"Child foo() 1" 3、合并生命周期此时，若单击h1标签，则在控制台中打印"Child foo() 1"

合并生命周期

let mixin={
    mounted(){
        console.log('mixin say hi')//先输出
    },
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('mixin foo()'+this.msg++)
        }
    }
}
let vm=new Vue({
    el:"#app",
    data:{
        msg: 2
    },
    mounted: function(){
        console.log('app say hi')//后输出
    },
    methods:{
        foo(){
            console.log('Parent foo()'+this.msg)
        }
    }
})

通过上面的介绍，现在对mixins有了比较深入的了解，在设计复杂组件时是很有必要的。

到此这篇关于vue中的mixins混入使用方法的文章就介绍到这了,更多相关vue中的mixins内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉