VUE----Mixin(混入)

mixin(混入)

功能: 可以把多个组件共用的配置提取成一个混入对象
使用方式:
    第一步定义混合,例如:
        {
            data(){...},
            methods:{...},
            ....
        }
    第二步使用混入,例如:
        1.全局混入:Vue.mixin(xxx)
        2.局部混入:mixins:['xxx']

定义混入
mixin.js

export const mixin = {
    methods: {
        showName(){
            console.log(this.name)
        }
    },
    mounted() {
        console.log('你好')
    },
}

export const mixin2 = {
    data(){
        return {
            x:100,
            y:200
        }
    }
}

使用混入

全局混入
main.js

// 引入vue
import Vue from 'vue'
//引入App
import App from './App'
import {mixin,mixin2} from './mixin'
// 关闭Vue的生产提示
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(mixin2)
// 创建Vue
new Vue({
    render:h=>h(App)
}).$mount("#app")

局部混入
School.vue

<template>
  <div>
      <h2 @click="showName">学校名字: {{name}}</h2>
      <h2>学校地址: {{address}}</h2>
  </div>
</template>

<script>
// 引入一个混合
// import {mixin} from '../mixin'
export default {
  name:'Student',
  data () {
    return {
        name:'blibli',
        address:'无锡'
    };
  },
  // mixins:[mixin]
}

</script>

Student.vue

<template>
  <div>
      <h2 @click="showName">学生姓名: {{name}}</h2>
      <h2>学生性别: {{sex}}</h2>
  </div>
</template>

<script>
// 引入一个混合
// import {mixin,mixin2} from '../mixin'
export default {
  name:'Student',
  data () {
    return {
        name:'张三',
        sex:17
    };
  },
  // mixins:[mixin,mixin2],
  mounted() {
    console.log('代码中的你号')
  },
}

</script>