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