p67 mixin 混入/混合：两个组件共享一个配置

p67 mixin 混入/混合：两个组件共享一个配置

• 一定是先引入、再配置进去、使用的

school

<template>
	<div>
		<!-- showname在混合当中 -->
		<h2 @click="showName">学校名称：{{ name }}</h2>
		<h2>学校地址：{{ address }}</h2>
	</div>
</template>

<script>
//引入一个hunhe
// 局部混合：在此引入混合
// import { hunhe, hunhe2 } from '../mixin'
export default {
	name: 'School',
	data() {
		return {
			name: '尚硅谷',
			address: '北京',
			x: 666  //以data中的x为准，混合中再有这个变量就不起作用
		}
	},
	mounted() {
		console.log('nihaoa')
	},
	// 局部混合：在此配置混合。要是很多文件有需要引入混合，那100个文件都要写一遍吗？那肯定不是->引出全局混合
	// mixins: [hunhe, hunhe2],
}
</script>

---

student

<template>
	<div>
		<h2 @click="showName">学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
	</div>
</template>

<script>
// import { hunhe, hunhe2 } from '../mixin'
export default {
	name: 'Student',
	data() {
		return {
			name: '张三',
			sex: '男'
		}
	},
	// hunhe有的、hunhe2有的 内容会组合到一块给这个组件用（此处为局部混合）
	// mixins: [hunhe, hunhe2]
}
</script>

---

App.vue

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>
<script>
	import School from './components/School'
	import Student from './components/Student'
	export default {
		name:'App',
		components:{School,Student}
	}
</script>

---

main.js

import Vue from 'vue'
import App from './App.vue'
import {hunhe, hunhe2} from './mixin'  //引用
Vue.config.productionTip = false

Vue.mixin(hunhe)  //配置
Vue.mixin(hunhe2)
// 放在全局上，会输出四次'你好啊'，vm上面有，3个vc上面有

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

---

mixin.js（名称可以改变）

// 要把配置交出去，用export，不然别人没法引入
// 分别暴露：引入的时候就得 import {hunhe} from ...
export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}