巧妙利用混入解决$parent/$children带来的耦合性

巧妙利用混入解决$parent/$children带来的耦合性

 

最近在跟着开课吧学习web全栈的课程,说实话真的感觉自己底子太差了,什么都“新鲜”的不行! 所以只能下功夫去努力了,整理一下学习中学到的方法,总结有错误的地方希望大家提醒一下,共同进步吧。

一、 利用vue实现element组件表单校验(目标)

课程就是为了实现这样一个小案例,那么就涉及到了父子组件中的传值问题了,到底用什么是最合适的的呢?就成了我们今天讨论的重点了!大概功能效果如图所示:

页面效果图

二、如何解决局部校验和全局校验中的父子通信

方案1:利用$parent/$children获取需要当前表单校验的组件(校验用的async-validator插件)

Kinput组件

<input :type="type" :value="value" @input="onInput">
methods: {
    onInput(e) {
        this.$emit('input', e.target.value)
        // 当数据发生变化,需要执行校验
        // $parent 父组件只有一个插槽,所以让父组件去派发一个方法
        this.$parent.$emit('validate')
    }
},

KForm

        provide(){
            return{
                form: this
            }
        },
        props:{
            model:{
                type: Object,
                required:true
            },
            rules:{
                type: Object
            }
        },
        methods: {
            validate(cb) {
                // 全局校验思路:
                // 方案1: $children
                // 1. 获取所有的Formitem
                const tasks = this.$children
                     .filter(item => item.prop)
                     .map(item => item.validate());
            } 
        },
//简单的组件结构
<template>
    <div>
        <KForm :model="model" :rules="rules" ref="form">
            <KFormItem label="姓名" prop="username">
                <KInput v-model="model.username"></KInput>
            </KFormItem>
            <KFormItem label="密码" prop="password">
                <KInput v-model="model.password"></KInput>
            </KFormItem>
            <KFormItem >
                <button @click="login">登陆</button>
            </KFormItem>
        </KForm>
    </div>
</template>

缺点: 以上方法实现这样的自定义组件结构是不会出错的,因为KForm组件下面只有KFormItem,没有其他的组件或者元素。但是如果出现了其他的子元素那么程序就会报错了,显然这样的方案对于用户的自定义是不适用的。

三、利用Vue混入来解决全局校验的功能

下面就是今天的重点了,我们要采用vue中非常好用的混入来解决这个问题

页面的组件dom不发生任何改变,我们可以去github上面查看element-ui源码是如何实现这样的功能的吧,

打开emitter.js文件里面是自定义的两个全局方法,

方法一“ 广播”

// broadcast 自上而下派发事件
// 参数1:组件名; 参数2: 事件名称; 参数3:参数数组
function broadcast(componentName, eventName, params) {
    // 遍历所有的子元素,如果子元素componentName和传入的相同则派发事件
    this.$children.forEach(child => {
        var name = child.$options.componentName;
        if (name === componentName) {
            child.$emit.apply(child, [eventName].concat(params));
        } else {
            broadcast.apply(child, [componentName, eventName].concat([params]));
        }
    });
}

方法二 “冒泡查询”

 // dispatch 自下而上,冒泡查找conponentName相同的组件并派发事件
        dispatch(componentName, eventName, params) {
            // 向上找父亲
            var parent = this.$parent || this.$root;
            var name = parent.$options.componentName;

            // 向上查找直到找到相同名称的组件
            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;
                if (parent) {
                    name = parent.$options.componentName;
                }
            }
            // 如果找到就派发事件,同时跳出循环
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
            }
        },

在我们本地的src目录创建mixins/emitter.js文件,接下来我们来修改我们方案1代码的不健全性

修正input中$parent写法
1. mixins emitter
2. 声明componentName
3. dispath()

KInput.vue

import emitter from '@/mixins/emitter.js'
export default {
    mixins: [emitter],
}
methods: {
    onInput(e) {
        this.$emit('input', e.target.value)
        // 方案二: 冒泡查询并派发事件dispatch,我们的参数是动态的所以不用传递参数
        // dispatch(componentName, eventName, params) {}
        this.dispatch('KFormItem', 'validate')
    }
},

KInputItem.vue

 mounted () {
     this.$on('validate', () =>{
        this.validate()
     })

     // 派发事件通知KForm,新增一个KFromItem实例
     if(this.prop) {
        this.dispatch('KForm', 'kkb.form.addField', [this])
     }   
},

KForm.vue

created(){
    // 添加,记得做移除的操作
    this.fields = []
    this.$on('kkb.form.addField', item =>{
        this.fields.push(item)
    })
},
methods: {
    validate(cb) {
    const tasks = this.fields.map(item => item.validate());
    // 2. 执行他们的校验方法,如果大家的promise全部都resolve,校验通过
    // 3. 如果其中有reject, catch() 中处理错误提示信息
    Promise.all(tasks)
        .then( () => cb(true))
        .catch( () =>cb(false));
    } 
},
以上代码操作就可以实现父子之间传值的问题了。感觉总结的不太好,自己理解的不是很透彻,有时间了可以好好看看element-ui的源码!
微信关注“优月优”公众号,获取免费赠书。
提醒:本站所有图书/视频资源均索引自互联网,版权争议与本站无关。如有侵权或其他争议的可能性,请发起版权投诉,因本站未参与任何制作、转制、存储等任一环节,故无法对涉及到的资源进行删除,本站会依据DMCA原则, 对涉及的资源链接进行删除。因为所有图书资源均不属于本站,本站只提供索引服务,故本站不保证任何资源的准确性,权威性,请使用者自行判断。
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏