## mixin（混入）

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

    使用方式：

      第一步定义混合，例如：

        {

          data(){...},

          methods:{..}

          ....

        }

      第二步使用混入，例如：

        （1）全局引入：Vue.mixin(xx)

          (2)局部混入：mixins:[xxx]

mixin混入

export const mixin={

    methods:{

        showName(){

            alert(this.name)

        }

    },

    mounted() {

        console.log('你好啊');

    },

       

}

export const mixin2={

    data(){

        return{

            y:100,

            x:200

        }

    }

       

}

 Student组件

<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:'男'

        }

    },

    // 局部混入

    // mixins:[mixin,mixin2],

    }

</script>

App组件

 

<template>

  <div>

    <Student/>

  </div>

</template>

<script>

    import Student from './components/Student.vue'

    export default {

        name:'App',

        components: {Student},

       

    }

</script>

main.js 

// 引入vue

import Vue from 'vue'

//引入App组件,他是所有组件的父组件

import App from './App.vue'

import {mixin,mixin2}from './mixin'

//关闭vue的生产提示

Vue.config.productionTip = false

//全局混入

Vue.mixin(mixin)

Vue.mixin(mixin2)

//创建Vue实例对象---vm

new Vue({

  el:"#app",

  render: h => h(App),

  // render:q=>q('h1','你好')

  // 相当于

  // render(createElement){

  //   return  createElement('h1','你好')

   

  // }

})

效果：