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
		}
	},
}