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

前面我们把文本框验证的错误提示部分封装到了

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;
}
}
})