VUE 学习第四单元 mixin(混入)

VUE 学习第四单元 mixin(混入)

混入(mixin ) 提供了一种非常灵活地方式,来分发Vue 组件中的可复用功能.一个混入对象可以包含任何组件选项(比如data methods mounted等). 当组件使用混入对象时所有混入对象的选项将被"混合进该组件本身的选项"

功能

​ 可以把多个组件共用的配置提取成一个混入对象

使用方法

​ 第一步定义混合:

​

{
    data(){....},
    methods:{....},
    .....
}

​ 第二步使用混合

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

​ 2.局部混入:mixins:['XXX']

代码案例

局部混入

//School
<template>
  <div class="school">
    <h2 @click="showName">姓名:{{ name }}</h2>
    <h2>性别:{{ sex }}</h2>
  </div>
</template>

<script>
    import {mixin,mixin2} from '../mixin'
    export default {
        name:'School',
        data() {
            return {
                name:'张四', 
                sex: '男',
                x:333
            }
        },
        //引入一个混合
        mixins:[mixin,mixin2]
    }
</script>

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

<script>
    import {mixin} from '../mixin'
    export default {
        name:'Student',
        data() {
            return {
                name:'家里蹲', 
                address: '上海虹桥'
            }
        },
        mixins:[mixin]
    }
</script>

//mixin
//分别暴露
export const mixin =  {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log("mounted!")
    },
}
//默认暴露 需要把当前模块暴露出去
//export default mixin
export const mixin2 =  {
    data() {
        return {
            x:100,
            y:200
        }
    },
}
}

如果存在data对象的值与调用者内部data对象中的值发生冲突程序采用就近原则

mounted 对象有特殊处理方法将 不受影响

全局混入

//引入Vue
import Vue from "vue";
//引入App
import App from './App.vue';
//引入混合
import {mixin,mixin2} from './mixin'

//关闭vue生产提示
Vue.config.productionTip = false;
Vue.mixin(mixin)
Vue.mixin(mixin2)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})