mixin介绍

1、什么是mixin？

当两个组件具有相同的功能但内容不一样时可以新建一个mixin，即两个组件共享一个同样的配置。

2、不仅能混合功能，也能混合数据、生命周期钩子；

3、如果组件中有的数据名称和mixin中的数据名称相同，以组件中原有数据为准，不替换原有数据；但生命周期钩子都执行；

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

5、使用方式：

第一步：定义混合，例如：

{
    data(){...}
    methods:{...}
    ...
}

第二步：使用混入，例如：

（1）全局混入：Vue.mixin(xxx)

（2）局部混入：mixins:['xxx']

案例

School.vue（学校组件）

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学校姓名：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我显示名字</button>
	</div>
</template>

<script>
	import {hunhe,hunhe2} from './mixin'
	export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平',
			}
		},
		mixins:[hunhe,hunhe2],
	}
</script>

Student.vue（学生组件）

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{age}}</h2>
		<button @click="showName">点我显示名字</button>
	</div>
</template>

<script>
	import {hunhe,hunhe2} from './mixin'
	export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				sex:'男',
				age:19,
			}
		},
		mixins:[hunhe,hunhe2],
	}
</script>

mixin.js（混入组件）

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

export const hunhe2 = {

    data(){
        return {
            x:100,
            y:200,
        }
    }
}

main.js （全局混入，配置后所有的vue组件都能使用）

/*
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//引入 全局mixin混合
import {hunhe,hunhe2} from './components/mixin'

//管比vue产生的提示
Vue.config.productionTip = false

//使用全局混合
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

//创建vue实例对象 -- vm
new Vue({
	el:'#app',
	//下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

效果：

Vue2--Vue脚手架mixin

mixin介绍

案例