Mixin混入

Mixin混入，可以将多个组件通用的data，methods，以及生命周期钩子 封装到一个js中。当data和methods混入时，如果和组件本身的data和methods有冲突，则以组件本身的为准；当生命周期钩子混入时，如果组件中已有该钩子，则会先执行Mixin中的钩子，再执行组件中的钩子

// src/mixin.js
export const mix = {
    data() {
        return {
            x: 1
        }
    },
    methods: {
        showName() {
            console.log(this.name);
        }
    },
}

export const mix2 = {
    mounted() {
        console.log('你好啊');
    }
}

1、局部使用mixin

// src/views/profile.vue
<template>
  <div class="profile">
      <div>profile</div>
      <button @click="showName">点我</button>
  </div>
</template>

<script>
import {mix, mix2} from '../mixin.js'
export default {
  data() {
    return {
      name: 'tm'
    }
  },
  created() {
    console.log('x=',this.x); //x= 1
  },
  mixins: [mix, mix2],
}
</script>

2、全局使用mixin

// main.js
import {mix, mix2} from './mixin'
Vue.mixin(mix)
Vue.mixin(mix2)

// src/views/profile.vue
<template>
  <div class="profile">
      <div>profile</div>
      <button @click="showName">点我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'tm'
    }
  },
  created() {
    console.log('x=',this.x); //x= 1
  },
}
</script>