1、混入
mixin.js
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted:function(){
console.log("哈哈!")
}
}
export const hunhe2 = {
data: function(){
return{
x:100,
y:200
}
}
}
StudentCom.vue
<template>
<div>
<h1>{{msg}}</h1>
<h1 @click="showName">学生名字:{{name}}</h1>
<h1>学生年龄:{{age}}</h1>
</div>
</template>
<script>
import {hunhe,hunhe2} from "../mixin"
export default {
name: "StudentCom",
data: function(){
return {
msg: "我是学生",
name: "张三",
age: 18
}
},
mixins: [hunhe,hunhe2]
}
</script>
2、全局混入
mixin.js
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted:function(){
console.log("哈哈!")
}
}
export const hunhe2 = {
data: function(){
return{
x:100,
y:200
}
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//引入全局混合
import {hunhe,hunhe2} from "./mixin"
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
new Vue({
render: h => h(App),
}).$mount('#app')
SchoolCom.vue
<template>
<div>
<h1 @click="showName">学校名字:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
</template>
<script>
// import {hunhe,hunhe2} from "../mixin"
export default {
name: "SchoolCom",
data: function(){
return {
name: "深圳大学",
address: "深圳"
}
},
// mixins: [hunhe,hunhe2]
}
</script>
StudentCom.vue
<template>
<div>
<h1>{{msg}}</h1>
<h1 @click="showName">学生名字:{{name}}</h1>
<h1>学生年龄:{{age}}</h1>
</div>
</template>
<script>
// import {hunhe,hunhe2} from "../mixin"
export default {
name: "StudentCom",
data: function(){
return {
msg: "我是学生",
name: "张三",
age: 18
}
},
// mixins: [hunhe,hunhe2]
}
</script>
App.vue
<template>
<div>
<img src="./assets/logo.png"/>
<hr>
<StudentCom></StudentCom>
<hr>
<SchoolCom></SchoolCom>
</div>
</template>
<script>
import StudentCom from "./components/StudentCom"
import SchoolCom from "./components/SchoolCom"
export default {
name: "App",
components:{
StudentCom: StudentCom,
SchoolCom: SchoolCom
}
}
</script>