Vue开发minxins

认知minxin

混入，类似于Object.assgin()，将定义好的数据和方法混入到组件实例中，达到数据和方法的复用

在开发中，复用的minxins很方便，下面介绍一些ElementUI中常用到的minxins

混入规则

data computed components, filter, directives,props，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

生命周期钩子函数watch created 等等-对于生命周期钩子函数，混入时会将同名钩子函数加入到一个数组中，然后在调用时依次执行。混入对象里面的钩子函数会优先于组件的钩子函数执行。如果一个组件混入了多个对象，对于混入对象里面的同名钩子函数，将按照数组顺序依次执行

1.跨组件数据通信 dispatch 和 boardcast

    export default {
        // methods的混入，遇到重名方法，组件实例会覆盖混入对象
        methods: {
            // 触发父组件componentName属性值为eventName的监听函数
            dispatch (componentName, eventName, params) {
                let parent = this.$parent || this.$root
                let name = parent.$options.componentName
                
                while (parent && (!name || name !== componentName )) {
                    parent = parent.$parent
                }
                if (parent) {
                    parent.$emit.apply(parent, [eventName].concat(parems))
                }
            },
            // 
            broadcast(componentName, eventName, params) {
                const broadcast = function (componentName, eventName, params) {
                    this.$children.forEach(child => {
                        if (name === child.$options.componentName) {
                            child.$emit.apply(child, [eventName].concat(params))
                        }else {
                            broadcast.apply(child, [componentName, eventName].concat(params))
                        }
                    })
                }
                
                broadcast.call(this, componentName, eventName, params)
            }
            
        }
        // 可以在父组件中提前定义监听事件
        //this.$on('eventName', value => { ... })
    }