13. mixin(混入)

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

使用方式:

1. 第一步第一混入,例如:

   ​ {

   ​ data(){......},

   ​ methods:{......},

   ​ ......

   ​ }

2. 第二步使用混入,例如:

   1. 全局混入: Vue.mixin(xxx)
   2. 局部混入: mixins:[xxx,xxx]

School.vue

<template>
  <div>
    <h2 @click="showName">学校名称: {{ name }}</h2>
    <h2>学校地址: {{ address }}</h2>
  </div>
</template>
<script>
// import mixin from "@/mixin";
// import {a,b} from "@/mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "南方IT",
      address: '广东'
    }
  },
  //局部
  // mixins:[mixin,a,b]
}
</script>
<style scoped>
</style>

Student.vue

<template>
  <div>
    <h2 @click="showName">学生姓名: {{ name }}</h2>
    <h2>学生性别: {{ sex }}</h2>
  </div>
</template>
<script>
// import mixin from "@/mixin";
// import {a,b} from "@/mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "呓语",
      sex: '男',
      x:999
    }
  },
  //局部
  // mixins:[mixin,a,b]
}
</script>
<style scoped>
</style>

mixin.js

export default {
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
export const a={
    mounted(){
        console.log("你好啊!!!")
    }
}
export const b={
    data(){
        return{
            x:200,
            y:1000
        }
    }
}

main.js

//引入Vue
import Vue from 'vue'
//引入App组件
import App from './App'
//引入mixin
import mixin from "@/mixin";
import {a,b} from "@/mixin";
//关闭Vue的生产提示
Vue.config.productionTip=false

//全局混入
Vue.mixin(mixin)
Vue.mixin(a)
Vue.mixin(b)

new Vue({
    el:"#app",
    render:h=>h(App)
})