Vue的mixin属性

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

1. mixin使用步骤

1. 定义混合，例如：

{
    data(){....}
    methods: {....}
    ....
}

2. 使用混入，例如：

• 全局混入： Vue.mixin(xxxx)
• 局部混入： mixins: ['xxx']

App.vue

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
import School from "@/components/School.vue";
import Student from "@/components/Student.vue";

export default {
  name: 'App',
  components: {
    School, Student
  },
}
</script>

mixin.js

export const showName = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}
export const myData = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

School.vue

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
    <h2>学校名字：{{ name }}</h2>
    <h2>学校地址： {{ schoolAddress }}</h2>
    <button @click="showName">弹窗</button>
  </div>
</template>
<script>
// 局部引入公共option的配置项mixin代码
import {showName} from '@/mixins.js'
export default {
  name: 'School',
  data() {
    return {
      msg: '欢迎大家！！',
      schoolAddress: '四川',
      name:'湘雅医学院'
    }
  },
  mixins: [showName]
}
</script>

Student.vue

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
    <h2>名字：{{ name }}</h2>
    <h2>年龄 {{ age }}</h2>
    <button @click="showName">弹窗</button>
  </div>
</template>
<script>
// 局部引入公共option的配置项mixin代码
import {showName} from '@/mixins.js'
export default {
  name: 'Student',
  data() {
    return {
      msg: '欢迎大家！！',
      name: '张三',
      age: 18
    }
  },
  mixins: [showName]
}
</script>

main.js

// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false

import { myData } from './mixins'
// 全局引入配置项
Vue.mixin(myData)

// 创建vm实例对象
new Vue({
  // 将App组件放到容器中
  render: q => q(App)
}).$mount('#app')

2. 如果mixin中有和子组件中相同的配置项，怎么样？

如果冲突了, 优先本地的属性