Vue中mixin的使用方法

mixin（混入）

功能：可以把多个组件共用的配置提取成一个混入对象，简单来说就是多个组件共享一个配置。

接下来说下他是如何进行使用的：

首先创建两个组件，这两个组件都有一个功能一样的方法。

APP根组件代码：

<template>
  <div id="nav">
    <About :name="name1" :age="age1"></About>
    <Home :name="name2" :age="age2"></Home>
  </div>
</template>


<script>
  import About from './views/About'
  import Home from './views/Home'
    export default {
        name: 'App',
        data(){
            return {
                name1:'孙悟空',
                age1:99,
                name2:'沙和尚',
                age2:99,
            }
        },
        components:{
            About,
            Home
        }
    }
</script>

<style lang="scss">

</style>

about组件代码：

<template>
    <div class="about">
        <div>
            <h1>姓名：{{usereName}}</h1>
            <h1>年龄：{{userAge}}</h1>
        </div>
        <div>
            <button @click="addAge">添加年龄</button>
        </div>
    </div>
</template>


<script>
    export default {
        name: 'About',
        props:['name','age'],
        data() {
            return {
                usereName:this.name,
                userAge:this.age,
            }
        },
       methods:{
           addAge(){
               this.userAge++
           }
       }
    }
</script>

home组件代码：

<template>
    <div class="home">
        <hr>
        <div>
            <h1>姓名：{{usereName}}</h1>
            <h1>年龄：{{userAge}}</h1>
        </div>
        <div>
            <button @click="addAge">添加年龄</button>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Home',
        props:['name','age'],
        data() {
            return {
                usereName:this.name,
                userAge:this.age,
            }
        },
        methods:{
            addAge(){
                this.userAge++
            }
        }
    }
</script>

可以看到上面两个组件的addAge方法是一样的。这时候我们可以利用混入。

首先创建一个mixin.js文件。

 在mixin这个js里面写方法。代码如下：

export const  raiseAge = {
    methods:{
        addAge(){
            this.userAge++
        }
    }
}

然后再组件里面引用，先import {raiseAge} from '../mixin' 引入，然后利用mixins这个配置项来使用。

about组件：

<template>
    <div class="about">
        <div>
            <h1>姓名：{{usereName}}</h1>
            <h1>年龄：{{userAge}}</h1>
        </div>
        <div>
            <button @click="addAge">添加年龄</button>
        </div>
    </div>
</template>


<script>
    import {raiseAge} from '../mixin'
    export default {
        name: 'About',
        props:['name','age'],
        data() {
            return {
                usereName:this.name,
                userAge:this.age,
            }
        },
        mixins:[raiseAge]
    }
</script>

home组件：

<template>
    <div class="home">
        <hr>
        <div>
            <h1>姓名：{{usereName}}</h1>
            <h1>年龄：{{userAge}}</h1>
        </div>
        <div>
            <button @click="addAge">添加年龄</button>
        </div>
    </div>
</template>

<script>
    import {raiseAge} from '../mixin'
    export default {
        name: 'Home',
        props:['name','age'],
        data() {
            return {
                usereName:this.name,
                userAge:this.age,
            }
        },
        mixins:[raiseAge]
    }
</script>

也可以直接再min.js里引入，但是这样引入，所有的组件都会共享这个方法。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import {raiseAge} from './mixin'

Vue.mixin(raiseAge)


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

还有一点要注意的是，如果mixin里面的data变量与组件里面的变量一致时，会优先使用组件里面的变量。

about组件，把组件的userName注释，这时候就会显示mixin里面的userName

<template>
    <div class="about">
        <h1>about组件</h1>
        <div>
            <h1>姓名：{{usereName}}</h1>
            <h1>年龄：{{userAge}}</h1>
        </div>
        <div>
            <button @click="addAge">添加年龄</button>
        </div>
    </div>
</template>


<script>
    import {raiseAge,ceshi} from '../mixin'
    export default {
        name: 'About',
        props:['name','age'],
        data() {
            return {
                // usereName:this.name,
                userAge:this.age,
            }
        },
        mixins:[raiseAge,ceshi]
    }
</script>

home组件里面，userName未注释。这时候就显示组件里面的userName

<template>
    <div class="home">
        <hr>
        <h1>home组件</h1>
        <div>
            <h1>姓名：{{usereName}}</h1>
            <h1>年龄：{{userAge}}</h1>
        </div>
        <div>
            <button @click="addAge">添加年龄</button>
        </div>
    </div>
</template>

<script>
    import {raiseAge,ceshi} from '../mixin'
    export default {
        name: 'Home',
        props:['name','age'],
        data() {
            return {
                usereName:this.name,
                userAge:this.age,
            }
        },
        mixins:[raiseAge,ceshi]
    }
</script>

 以上就是vue中mixin的使用方法。