Vue_2 --- 混入技术

0. 概述

组件中的大部分内容都一样,只有配置项中的数据、方法、生命周期钩子等不一样,就可以用mixin来定义为公共部分,然后再组件中导入使用即可

1. 未使用 mixin

1. School 组件

<template>
    <div>
        <student-info1/>
        <hr>
        <student-info2/>
    </div>
</template>

<script>
    import StudentInfo from "@/components/StudentInfo";
    import StudentInfo2 from "@/components/StudentInfo2";
    export default {
        name: "schoolInfo",
        components: {StudentInfo2, StudentInfo1},
    }
</script>

<style scoped>

</style>

2. Student1 组件

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

<script>
    export default {
        name: "StudentInfo1",
        data() {
            return {
                name: "小明",
                sex: "男",
                age: 18
            }
        },
        methods: {
            alertInfo() {  // 和Student2 同样的功能代码
                alert(this.name)
        	}
    	}

    }
</script>

<style scoped>

</style>

3. Student2 组件

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

<script>
    export default {
        name: "StudentInfo2",
        data() {
            return {
                name: "小红",
                sex: "女",
                age: 18
            }
        },
        methods: {
            alertInfo() {  // 和Student1 同样的功能代码
                alert(this.name)
        	}
    	}

    }
</script>

<style scoped>

</style>

2. 局部使用 mixin

1. School 组件

<template>
    <div>
        <student-info1/>
        <hr>
        <student-info2/>
    </div>
</template>

<script>
    import StudentInfo from "@/components/StudentInfo";
    import StudentInfo2 from "@/components/StudentInfo2";
    export default {
        name: "schoolInfo",
        components: {StudentInfo2, StudentInfo1},
    }
</script>

<style scoped>

</style>

2. mixin.js

在src目录下创建mixin.js,将两个组件共同的功能抽离出来,对于mixin和组件中的配置项相同的,以组件中的优先级更高,但是生命周期钩子是例外,所有钩子都会执行一遍,即先执行混合中的钩子,再执行组件中的钩子

src/mixin.js

// 方法混合
export const mixin = {
    methods: {
        alertInfo() {
            alert(this.name)
        }
    }
}

// 数据混合
export const dataMixin = {
    data(){
        return {
            address:"北京"
        }
    }
}

// 生命周期混合
export const mountedMixin = {
    mounted:{
        
    }
}

3. Student1 组件

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

<script>
    // 1. 引入一个mixin混合
    import {mixin} from "@/mixin";

    export default {
        name: "StudentInfo1",
        data() {
            return {
                name: "小明",
                sex: "男",
                age: 18
            }
        },
        // 2. 使用混合
        mixins:[mixin]

    }
</script>

<style scoped>

</style>

4. Student2 组件

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

<script>
    // 1. 引入一个mixin混合
    import {mixin} from "@/mixin";

    export default {
        name: "StudentInfo2",
        data() {
            return {
                name: "小红",
                sex: "女",
                age: 18
            }
        },
        // 2. 使用混合
        mixins:[mixin,dataMixin]

    }
</script>

<style scoped>

</style>

3. 全局使用 mixin

在main.js中引入和配置混合

1. 定义混合

export const mixin = {
    methods: {
        alertInfo() {
            alert(this.name)
        }
    }
}

2. 配置混合

main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin} from "@/mixin";   // 1. 导入混合

Vue.config.productionTip = false
Vue.mixin(mixin)  // 2. 配置混合


new Vue({
  render: h => h(App),
}).$mount('#app')

3. 使用混合

<template>
    <div>
        <!-- 直接使用即可 -->
        <h2 @click="alertInfo">学生姓名: {{name}}</h2>
        <h2>学生性别: {{sex}}</h2>
        <h2>学生年龄: {{age}}</h2>
    </div>
</template>