vue之Mixins混入

先阅读vue的官网：https://cn.vuejs.org/v2/guide/mixins.html

Mixins

Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。

mixins就是混入。一个混入对象可以包含任意组件选项。

什么时候使用Mixins

1. 页面的风格不用，但是执行的方法和需要的数据类似，我们是选择每个都写呢还是提取出公共部分呢？

以vue-cli创建的项目为例，可以这样写：

• mixin.js

export const circleSwiper = {
  data() {
    return {
       msg : 'hello',
       isshowing: false
    }
  },
  activated() {
    
  },
  methods: {
      toggleShow () {
        this.isshowing = !this.isshowing
      }
  }
}

• 将mixin.js引入改组件，就可以直接使用toggleShow 方法了，在modal.vue中：

import {circleSwiper} from '@/assets/js/mixins.js'

export default {
    mixins: [circleSwiper],
    mounted () {
        
    }
}

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。
mixin的数据对象和组件的数据发生冲突时以组件数据优先。