vue中mixins的使用

组件内使用mixin

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

<script>
  const myMixin = {
    created(){
      this.hello();
    },
    methods: {
      hello(){
        window.console.log(this.msg)
      }
    }
  };
  export default {
    mixins: [myMixin],
    name: 'mixins',
    data () {
      return {
        msg: 'mixin22',

      }
    }
  }
</script>

页面上输出： image.png
控制台输出： image.png

全局使用mixin（使用Vue.mixin()方法）

Vue.mixin({
  created(){
    console.log('global mixin')
  }
});

参考：https://www.jianshu.com/p/393dcfa6f83e
https://zcfy.cc/article/using-mixins-in-vue-js-css-tricks-3257.html