Vue2.0 Vue脚手架 mixin混入

mixin配置项:混入||混合

<template>
    <div>
        <h2>学生信息:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
    </div>
</template>

<script>
    export default{
        name: 'Student',
        data(){
            console.log(this)
            return{
                name: '张三',
                sex: '男',
            }
        },
        methods:{
            
        },
    }
</script>

<style>

</style>

提一个需求:

当你点击学生姓名的时候弹窗展示这个人的名字

<template>
    <div>
        <h2 @click="showName">学生信息:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
    </div>
</template>

在创建一个school.vue

School.vue

<template>
    <div>
        <h2 @click="showName" class="sn">学生信息:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
    </div>
</template>

<script>
    export default{
        name: 'Student',
        components:{},
        data(){
            console.log(this)
            return{
                name: '张三',
                sex: '男',
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
.sn{
    cursor: pointer;
}
</style>

就观察你创建的俩个组件(School和Student)有些功能是一样的比如methods里面的代码都是一样的,其实可以

吧这俩个都删除，你单独写一个东西，只要引用一下；这就叫mixin混入(俩个组件共享一个配置，而且这个配置是一样的)

创建一个mixin.js(不是一定要叫这个名字)

mixin.js

const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
}

你最终还是要把这个mixin交出去:拿import语句引入你的mixin.js但是这样写啥也没有所以暴露(export)一下(用分别暴露):

export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
}

怎么用:

• //引入一个混合(mixin)
  import {mixin} from '../mixin.js'
  

• 引入一个全新的配置项(mixins):

  mixins:[mixin]
  

Student.vue

<template>
    <div>
        <h2 @click="showName" class="sn">学生信息:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
    </div>
</template>

<script>
    import {mixin} from '../mixin.js'
    export default{
        name: 'Student',
        components:{},
        data(){
            console.log(this)
            return{
                name: '张三',
                sex: '男',
            }
        },
        mixins:[mixin]
    }
</script>

<style>
.sn{
    cursor: pointer;
}
</style>

School.vue

<template>
    <div>
        <h2 @click="showName" class="sn">学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
    //引入一个混合(mixin)
    import {mixin} from '../mixin.js'
    export default{
        name:'School',
        components:{},
        data(){
            return{
                name: 'bilibili',
                address : '魔都'
            }
        },
        //怎么应用？
        //用到一个全新的配置项
        mixins:[mixin]
    }
</script>

<style>
    .sn{
        cursor: pointer;
    }
</style>

---

那么这个混合里面都能写什么?

在Vue里面所有的配置项都可以写在混合里面

混合就是复用配置

验证:

export const hunhe = {
    data(){
        x: 100,
        y: 200
    }
}

Student.vue

<template>
    <div>
        <h2 @click="showName" class="sn">学生信息:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
    </div>
</template>

<script>
    import {mixin,hunhe} from '../mixin.js'
    export default{
        name: 'Student',
        components:{},
        data(){
            console.log(this)
            return{
                name: '张三',
                sex: '男',
            }
        },
        mixins:[mixin,hunhe]
    }
</script>

<style>
.sn{
    cursor: pointer;
}
</style>

x:(...)
y:(...)
get x: ƒ proxyGetter()
set x: ƒ proxySetter(val)
get y: ƒ proxyGetter()
set y: ƒ proxySetter(val)

因为人家拿着混合里面所配置的东西和你这个(Student.vue)里面的东西进行了整合

如果混合里的data里有一个x元素,你的vue里面的data里面也有一个x元素，那到底听谁的?

原则是你(.vue)这里没有的元素混合里面有，混合里面的就给你，但是你的.vue里面有的以你的为主,说白了不破坏你的代码

这里面有个特殊的情况:

mixin.js

export const hunhe = {
    data(){
        return{
            x: 100,
            y: 200
        }
    },
    mounted() {
        console.log('你好呀')
    },
}

里面有一个mounted()(详情请看生命周期函数_挂载的流程)

组件一挂载就控制台输出你好呀

在Student.vue再写一个mounted

Student.vue

<script>
    import {mixin,hunhe} from '../mixin.js'
    export default{
        name: 'Student',
        components:{},
        data(){
            console.log(this)
            return{
                name: '张三',
                sex: '男',
            }
        },
        mixins:[mixin,hunhe],
        mounted() {
            console.log('你好啊!!!!')
        },
    }
</script>

这样也冲突,最终听谁的?

生命周期钩子不以谁为主

你好呀
你好啊!!!!

对生命周期钩子有不同的处理，注意顺序问题.vue的钩子往后靠了;混合里的钩子在前

这些都属于局部混合

除了局部混合还有更好的方式:全局混合

main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin,hunhe} from './mixin.js'

Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(hunhe)

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

这样子你所有的VueComponent(vc)和Vue实例(vm)都会得到你这个混合的东西

总结

mixin(混入也叫混合)

​功能:可以把所有组件公用的配置提取成一个混入对象

​ 使用方法:

​ 第一步定义混合,例如:

​ {

​ data(){…},

​ methods:{…}

​ }

​ 第二步使用混入，例如:

​ (1).全局混入:Vue.mixin(xxx)

​ (2).局部混入: mixin:[‘xxx’]