mixins可写入的模块

mixins可写入组件export default 中的所有内容。data , methods , components , computed 和 钩子函数。这些内容会根据不同的规则融合到组件中。

data，methods和components

在组件中可以调用的data为本身的data和mixins中data的并集 , 如果data的键冲突，以组件本身的值为准；
methods和components同理

钩子函数

组件和minxins中的钩子函数都会被执行，mixins在组件之前。

image.png

例子

<template>
<div id="">
    <input v-model="msg"/>
</div>

</template>
<script>
    var mixin = {
        data(){
            return {
                msg:'mixins:msg',
                name:'mixins:name'
            }
        },
        methods: {
            hello() {
                console.log('mixin:hello')
            }
        },
        beforeCreated(){
            console.log("mixins:beforeCreated");
        },
        created() {
            console.log("mixins:created");
        },
        beforeMount(){
            console.log("mixins:beforeMount");
        },
        mounted(){
            console.log("mixins:mounted");
        },
        beforeUpdate(){
            console.log("mixins:beforeUpdate");
        },
        updated(){
            console.log("mixins:updated");
        },
        beforeDestory(){
            console.log("mixins:beforeDestory");
        },
        destoryed(){
            console.log("mixins:destoryed");
        }
        
    }
    export default {
        mixins: [mixin],
        data() {
            return {
                msg:'组件msg'
            }
        },
        methods: {
            hello() {
                console.log('组件：hello')
            }
        },
        beforeCreated(){
            console.log("组件:beforeCreated");
        },
        created() {
            console.log("组件:created");
        },
        beforeMount(){
            console.log("组件:beforeMount");
        },
        mounted(){
            console.log("组件:mounted");
            console.log(this.$data);
        },
        beforeUpdate(){
            console.log("组件:beforeUpdate");
        },
        updated(){
            console.log("组件:updated");
        },
        beforeDestory(){
            console.log("组件:beforeDestory");
        },
        destoryed(){
            console.log("组件:destoryed");
        }
    }
</script>