Vue mixin和mixins 混入

Vue.js 混入（mixin）与组件（mixins）的区别解析

最新推荐文章于 2024-02-29 07:45:00 发布

原创最新推荐文章于 2024-02-29 07:45:00 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue2.0 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue中的mixin和mixins选项，mixin用于全局注册混入，影响所有Vue实例，而mixins用于局部组件间共享属性和方法。通过示例展示了如何定义和使用mixin，以及它们与组件引用的区别。混入和组件引用在扩展组件功能上有所不同，混入会合并属性和方法，而组件保持相对独立。

Vue之mixin和mixins

mixin就是全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。例如给全部文件添加一些公用的实例（如方法、过滤器等）
插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

先定义mixin.js

const mixin = {
  methods: {    
      two(num){
          return num*num
      }  
  }
}
export defaullt mixin

在main.js文件全局引入

import mixin from './mixin'
Vue.mixin(mixin)

其他vue页面里面就可以使用mixin里面定义好的方法，如：

 data() {
    return {
      name: "abc",
      square: this.two(3)
    }
  }

mixins
mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。

mixins和普通情况下引入组件有什么区别？
组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：
父组件 + 子组件 >>> 父组件 + 子组件
mixins：
父组件 + 子组件 >>> new父组件
值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的