vue mixins是什么-Vue.js-PHP中文网

vue mixins是什么

coldplay.xixi

发布： 2020-12-01 15:53:39

原创

2920人浏览过

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

vue mixins是什么

本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

mixins

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

混合对象可以包含任意组件选项。

立即学习“前端免费学习笔记（深入）”；

当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

mixins理解

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

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

单纯组件引用：

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

mixins：

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

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

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中的。

以上就是vue mixins是什么的详细内容，更多请关注php中文网其它相关文章！