Vue的mixin配置

组件School代码块

<template>

  <div>

    <h1 @click="showName">学校名称:{{ name }}</h1>

    <h2>学校地址:{{ adress }}</h2>

  </div>

</template>

<script>

// import { hunhe, hunhe2 } from "../mixin";

export default {

  name: "STUDENT",

  data() {

    return {

      name: "广信",

      adress: "广州",};

},

  // mixins: [hunhe, hunhe2],};

</script>

组件Student代码块

// import { hunhe, hunhe2 } from "../mixin";

export default {

  name: "STUDENT",

  data() {

    return {

      name: "pizza",

      sex: "男",

    };

  },

  // mixins: [hunhe, hunhe2],

};

</script>

集合组件

 <div><Student /> <hr> <School /></div>

</template>

<script>

import School from "./School.vue";

import Student from "./Student .vue";

export default {

  name: "App",

  components: { Student,School,},

};

如果混合配置mixin有data()数据就会混合在每个引用的组件中

 

如果混合配置mixin有mount()每个组件都会执行挂载

 

Mounted全局挂载

 

 

总结

##mixin(混入)

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

     使用方式：

       第一种定义混合,例如：

       {

         data(){....},

         methods:{...}

         .....

       }

       第二种使用混合

        (1).Vue.mixin(XXX)

        (2).全局混入：mixins:['xxx']