vue 组件开发原理与实现方法详解

2023-08-05 05:00:04 176

本文实例讲述了vue组件开发原理与实现方法。分享给大家供大家参考，具体如下：

概要

vue的一个特点是进行组件开发，组件的优势是我们可以封装自己的控件，实现重用，比如我们在平台中封装了自己的附件控件，输入控件等。

组件的开发

在vue中一个组件，就是一个独立的.vue文件，这个文件分为三部分。

1.模板

2.脚本

3.样式

我们看一个系统中最常用的组件。



import{calcRight}from"@/assets/app.js";
import{VTypes,RxUtil}from"@/assets/util.js";
exportdefault{
name:"rx-input",
props:{
value:[String,Number],
permission:Object,
permissionkey:String,
showClear:{
type:Boolean,
default:true
},
readonly:{
type:Boolean,
default:false
},
placeholder:{
type:String,
default:""
},
required:{
type:Boolean,
default:false
},
/**
*验证表达式
*/
vtype:{
type:String,
default:""
},
onblur:Function,
onfocus:Function,
conf:Object
},
data(){
return{
currentValue:this.value,
iserror:false,
isempty:true,
checkReq:true
}
},
computed:{
right:function(){
returncalcRight(this);
}
},
mounted(){
this.valid(this.required);
},
methods:{
valid(chkReq_){
varval=this.currentValue;
if(chkReq_&&this.required){
if(RxUtil.isEmpty(val)){
//this.iserror=true;
returnfalse;
}
}
if(!this.vtype){
//this.iserror=false;
returntrue;
}
varvalidFunc=VTypes[this.vtype];
if(typeofvalidFunc=="undefined"){
//this.iserror=false;
returntrue;
}
//验证
varrtn=validFunc.valid(val);
//this.iserror=!rtn;
returnrtn;
},
blurHandler(e){
//this.iserror=!this.valid(this.checkReq);
this.onblur&&this.onblur(e);
},
focusHandler(e){
this.showClear=true;
this.onfocus&&this.onfocus(e);
},
clearInput(){
this.currentValue='';
if(this.required){
//this.iserror=true;
}
}
},
watch:{
currentValue:function(val,oldVal){
this.$emit('input',this.currentValue);
//是否为空
this.isempty=RxUtil.isEmpty(val);
},
value:function(val,oldVal){
if(val!=oldVal){
this.currentValue=this.value;
}
}
}
}


.box-custom-component::after{
content:'';
display:block;
clear:both;
}
.box-custom-componentinput{
float:left;
width:calc(100%-.65rem);
}
.box-custom-componenta{
float:left;
width:.65rem;
}

定义好组件后，使用方法如下：

1.import组件

importRxInputfrom'@/components/common/form/RxInput';

2.注册组件

Vue.component(RxInput.name,RxInput);

3.使用组件

这里我们定义了v-model我们通过将数据绑定到组件上实现数据的双向绑定。

实现双向绑定，需要注意两点：

1.定义一个value的属性。

在上面组件的代码中，我们可以看到我们定义了一个value属性。

在只读的情况下直接绑定显示。

{{value}}

另外我们在data定义上，将value赋值给了currentValue。这个值绑定到输入控件上。

2.数据改变时调用方法。

this.$emit('input',this.currentValue);

这样就实现了数据的双向绑定。

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 组件开发原理与实现方法详解

热门推荐

随机推荐