功能:可以把多个组件共用的配置提取成一个混入对象
使用方式:
第一步定义混合,例如:
{
data(){...},
methods:{..}
....
}
第二步使用混入,例如:
(1)全局引入:Vue.mixin(xx)
(2)局部混入:mixins:[xxx]
mixin混入
export const mixin={
methods:{
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好啊');
},
}
export const mixin2={
data(){
return{
y:100,
x:200
}
}
}
Student组件
<template>
<div>
<h2 @click="showName">学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template>
<script>
// import {mixin,mixin2}from '../mixin'
export default {
name:'Student',
data(){
return{
name:'张三',
sex:'男'
}
},
// 局部混入
// mixins:[mixin,mixin2],
}
</script>
App组件
<template>
<div>
<Student/>
</div>
</template>
<script>
import Student from './components/Student.vue'
export default {
name:'App',
components: {Student},
}
</script>
main.js
// 引入vue
import Vue from 'vue'
//引入App组件,他是所有组件的父组件
import App from './App.vue'
import {mixin,mixin2}from './mixin'
//关闭vue的生产提示
Vue.config.productionTip = false
//全局混入
Vue.mixin(mixin)
Vue.mixin(mixin2)
//创建Vue实例对象---vm
new Vue({
el:"#app",
render: h => h(App),
// render:q=>q('h1','你好')
// 相当于
// render(createElement){
// return createElement('h1','你好')
// }
})
效果: