mixin--vue的混入

2020-12-23  本文已影响0人  3e2235c61b99

以下是vue官网对mixin的介绍:

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

选项合并:当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

刚开始看的时候,我感觉这个东东和组件好像没有什么区别.然鹅,看了这篇文章后发现我还是太年轻了.下面我们来看看mixins和普通情况下引入组件有什么区别

我自己想了下mixin的使用场景:

  1. 不同的页面需要使用相同的数据
  2. 不同的页面可以使用相同的方法
  3. 其他
    以下是我自己写的一个小栗子:
<!--page-a.vue-->
<template>
    <div class="padd50">
        <div>page-a</div>
        <el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" />
        <el-button @click="commit">提交</el-button>
    </div>
</template>

<script>
    import mixin from './mixin'

    export default {
        name: "page-a",
        mixins: [ mixin ],
        data() {
            return {
                time: '',
                name: '明妃',
            }
        },

        created() {
            console.log('page-a  父组件created钩子后执行')
            console.log(this.name)
            console.log(this.exmap)
        },

        mounted() {
            console.log('page-a  父组件mounted钩子后执行')
        }
    }
</script>
<!--page-b.vue-->
<template>
    <div class="padd50">
        <div>page-b</div>
        <el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" />
        <el-button @click="commit">提交</el-button>
    </div>
</template>

<script>
    import mixin from "./mixin";

    export default {
        name: "page-b",
        mixins: [ mixin ],
        data() {
            return {
                time: ''
            }
        },

        created() {
            console.log('page-b  父组件钩子后执行')
        }
    }
</script>
// mixin.js
const mixin = {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            name: '废柴',
            exmap: 'mixin特有,可以在父组件直接使用',
        }
    },

    methods: {
        commit() {
            console.log("mnxin方法被提交")
        }
    },

    created() {
        console.log('mixin created钩子先执行')
    },

    mounted() {
        console.log('mixin mounted钩子先执行')
    }
}

export default mixin

访问page-a页面,输出如下:

mixin钩子先执行
page-a  父组件钩子后执行
明妃
mixin特有,可以在父组件直接使用
mixin mounted钩子先执行
page-a  父组件mounted钩子后执行

可以看到,如下:

  1. mixin钩子和父组件钩子会合并,都会执行
  2. mixin钩子先于父组件钩子执行
  3. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
  4. 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
上一篇下一篇

猜你喜欢

热点阅读