Vue混入

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>