29-Vue脚手架-mixin 混入

mixin 混入

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

使用混合：

1）第一步，定义混入

新建一个JS文件，比如mixin.js

src/mixin.js

// 分别暴露
export const hunhe1 = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好啊！我是mixin混合中的",)
    }
}

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

2）使用混入

局部混入（组件里面，School.vue）

import {hunhe1,hunhe2} from "../mixin"

// 局部混入
mixins:[hunhe1,hunhe2]

全局混入（main.js里面）

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

// 全局混入
Vue.mixin(hunhe1)
Vue.mixin(hunhe2)

案例，把多个组件共用的配置提取成一个混入对象

src/mixin.js （定义混入）

// 分别暴露
export const hunhe1 = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好啊！我是mixin混合中的",)
    }
}

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

src/components/Student.vue（使用混入，局部使用）

<template>
  <div>
    <!--点击标签，弹窗学生名称-->
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  // 引入一个混合（局部混合）
  // import {hunhe1,hunhe2} from "../mixin"
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Student",
    data(){
      return{
        name:"马铃薯",
        sex:"男",
      }
    },
    // methods:{
    //   showName(){
    //     alert(this.name)
    //   }
    // }

    // 局部混合
    // mixins:[hunhe1,hunhe2]
  }

</script>

src/components/School.vue（使用混入，局部使用）

<template>
  <div>
    <!--点击标签，弹窗学校名称-->
    <h2 @click="showName">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
  // 引入一个混合（局部混合）
  // import {hunhe1,hunhe2} from "../mixin"

  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    data(){
      return{
        name:"东华理工大学",
        address:"江西南昌",
      }
    },
    // methods:{
    //   showName(){
    //     alert(this.name)
    //   }
    // }

    // 局部混合
    // mixins:[hunhe1,hunhe2],

    mounted() {
      console.log("你好啊！！！！！我是School组件中的")
    }
  }

</script>

src/App.vue

<template>
  <div>
    <!--学生的信息-->
    <Student></Student>
    <hr/>
    <!--学校的信息-->
    <School></School>
  </div>
</template>

<script>
  // 引入Student组件
  import Student from "@/components/Student.vue";
  // 引入School组件
  import School from "@/components/School.vue";

  export default{
    name:"App",
    components: {
      // eslint-disable-next-line vue/no-unused-components
      School: School,
      Student: Student
    }
  }
</script>

src/main.js（使用混入，全局使用）

import Vue from "vue"
import App from "./App.vue"

// 全局混合
import {hunhe1,hunhe2} from "./mixin";

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

// 全局混合
Vue.mixin(hunhe1)
Vue.mixin(hunhe2)

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