Vue mixin混入(混合)技术

两个组件共享一个配置，这个配置必须是一样的（把一样的配置提取出来）。

如果混入的数据与源数据不一样，会把混合的数据和原来的数据，整合在一起。

如果混入的数据与源数据冲突了，会以自身的data或者methods为主，生命周期钩子冲突，则自身的与混入的都会执行（先执行混合的钩子，再执行自己的钩子）！

导入的时候一定要：import {mixin} from "../mixin" 这种形式写。

mixins:[mixin]：用于使用mixin混入，可以导入多个混入。

提取出相同的代码

#src/mixin.js

export const mixin = {
    methods:{
        myClick(){
            alert("局部混入："+this);
        }
    }
}

export const newMixin = {
    methods:{
        newMyClick(){
            alert("全局混入："+this);
        }
    }
}

局部混入

<template>
    <div id="xin">
        <h1 @click="myClick">{{name}}</h1>
        <h1 @click="newMyClick">{{age}}</h1>
    </div>
</template>

<script>

import {mixin} from "../mixin"

export default {
    name:"xin",
    //只定义接收的变量名
    props:["name","age"],
    mixins:[mixin]
}
</script>

<style>
    #xin{
        background-color: brown;
    }
</style>

全局混入

# main.js
import Vue from 'vue'
import App from './App.vue'
import { newMixin } from './mixin';

Vue.config.productionTip = false

Vue.mixin(newMixin);

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