vue使用之混入（mixins）

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

局部混入
在libs 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件

/* 局部混入 */
const mixin = {
  data() {
    return {
      msg: "aa"
    };
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + ",这是mixin混入的方法");
    }
  }
};

export default mixin;

在需要的页面引入并使用

<template>
  <div class="about">
    <span>{{ msg }}</span>
  </div>
</template>

<script>
import mixin from "@/libs/mixin.js";
export default {
  name: "about",
  data() {
    return {};
  },
  mixins: [mixin],
  mounted() {
    /* 局部混入过来的方法 */
    this.mixinMethod();
  },
  methods: {
  }
};
</script>

全局混入

 在 main.js 中写入如下代码
/* 全局混入 */
Vue.mixin({
  data() {
    return {
      val: 789
    };
  },
  methods: {
    overallMixin() {
      console.log(this.val, ",我是全局混入过来的");
    }
  }
});

在组件中直接使用

<template>
 <div class="about">
   <span>{{ val }}</span>
 </div>
</template>

<script>
export default {
 name: "about",
 data() {
   return {};
 },
 mounted() {
   /* 全局引入过来的方法 */
   this.overallMixin();
 },
 methods: {}
};
</script>