自己写个vue.js插件(3):插件里面包含子组件

原创于 2016-11-12 16:36:21 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

VUEJS+PHP+NODEJS实战专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何将文本框及其验证逻辑封装为Vue子组件，以提高代码复用性和维护性。通过示例展示了如何创建自定义组件，并在父组件中调用。

前面我们把文本框验证的错误提示部分封装到了validate.js 插件中。
还不够彻底，我们应该把文本框也封装尽量，弄成子组件的形式。

1.这是用户名文本框，原本是在user-name.vue 组件中的

input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">

2.我们要做到在user-name.vue 只使用组件的形式

<validate-text></validate-text>

3.下面就到validate.js 中看看，是怎么实现的

// 验证文本框,自带组件
        Vue.component("validate-text",{
            template: '<div><input type="text" class="form-control" v-model="textValue" />' + '<label v-if="showErrorLabel" class="label label-danger">用户名不合法</label></div>',
            data(){
                return{textValue:""}
            },
            // 计算属性
            computed:{
                showErrorLabel(){
                    if(/\w{6,20}/.test(this.textValue) || this.textValue == ""){
                        // 验证通过,不提示错误
                        return false;
                    }
                    return true;
                }
            }
        })