vue中mixin(混入)的使用方法

Vue中mixin（混入）的使用方法

官方介绍

概念：可以把多个组件共用的配置提取成一个混入对象

官方文档位置

定义一个混入对象(mixin/index.js)

const myMixin = {
    data() {
        return {
            name: "xxxxx",
            age: 20
        }
    },
    created() {
        console.log('我是mixin');
    },
}

export default myMixin

局部混入

​ 组件中引用

<template>
  <div>
  </div>
</template>

<script>
import myMixin from "../mixin/index"; //引入mixin文件
export default {
  name: "Demo",
  mixins: [myMixin], //mixin配置项
  data() {
    return {};
  },
};
</script>

全局混入

​ main.js

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

效果展示

注意事项

• 混入对象的钩子将在组件自身钩子之前调用。
• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
• 一旦使用全局混入，它将影响每一个之后创建的 Vue 实例

const myMixin = {
    data() {
        return {
            name: "gaotianhang",
            age: 20
        }
    },
    methods: {
        getData() {
            console.log("我是mixin中的方法");
        },
    },
    created() {
        console.log('我是mixin中的created');
    },
}

export default myMixin

<template>
  <div>
  </div>
</template>
<script>
import myMixin from "../mixin/index";
export default {
  name: "Father",
  mixins: [myMixin],
  data() {
    return {};
  },
  methods: {
    getData() {
      console.log("我是组件中的方法");
    },
  },
  created() {
    console.log("我是组件中的created");
    this.getData();
  },
};
</script>