vue---mixin混入

maidu_xbd

已于 2023-04-27 10:23:24 修改

阅读量900

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-04-23 23:49:55 首次发布

本文链接：https://blog.youkuaiyun.com/maidu_xbd/article/details/130331624

版权

vue 专栏收录该内容

107 篇文章

订阅专栏

mixins是Vue中实现组件功能复用的机制，它可以包含任意组件选项如data、methods、生命周期钩子等。当组件使用mixins时，其选项会与组件自身的选项合并。混入的钩子函数会形成数组并按顺序调用，而同名方法或属性则以组件自身的为准。可以进行局部注册，如在组件内导入并使用，也可以全局注册，影响所有后续创建的Vue实例，但全局使用需谨慎。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一个混入对象可以包含任意组件选项（如data、methods、created、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。我们可以使用混入，向组件注入自定义的行为。和组件注册和指令一样 vue 提供了全局和局部注册mixin的mixin 函数。

1、局部注册mixin

//mixin.js
let mixin = {
  created() {
    console.log("mixin created");
    this.sayHello();
  },
  methods: {
    sayHello() {
      console.log("mixin hello");
    }
  }
};
export default mixin;

//Home.vue
<template>
  <div>Home</div>
</template>
<script>
import myMixin from "../mixin.js";
export default {
  name: "home",
  mixins: [myMixin],
  created() {
    console.log("home created");
    this.sayHello();
  },
  methods: {
    sayHello() {
      console.log("home hello");
    }
  }
};
</script>

同名钩子函数将合并为一个数组，混入对象的钩子将在组件自身钩子之前调用。

混入对象和组件对象二者的 methods、components 和 directives，将被合并为同一个对象。若对象键名冲突时，取组件对象的键值对。

2、全局注册mixin

//main.js
import mixin from './mixins';
Vue.mixin(mixin)

注意：应谨慎地使用vue.mixin这种混入方式，因为全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。