vue 组件开发原理与实现方法详解
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下
本文实例讲述了vue 组件开发原理与实现方法。分享给大家供大家参考，具体如下：
概要
vue 的一个特点是进行组件开发，组件的优势是我们可以封装自己的控件，实现重用，比如我们在平台中封装了自己的附件控件，输入控件等。
组件的开发
在vue 中一个组件，就是一个独立的.vue 文件，这个文件分为三部分。
1.模板
2.脚本
3.样式
我们看一个系统中最常用的组件。
<template>
<div >
<div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>
<div class="box-custom-component" v-else-if="right=='w'">
<input
type="text"
@blur="blurHandler"
@focus="focusHandler"
:required="required"
v-model="currentValue"
:placeholder="placeholder"
></input>
<a href="javascript:;" rel="external nofollow" class="yd-input-clear" tabindex="-1" @click="clearInput" v-show="showClear && !isempty"></a>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { calcRight } from "@/assets/app.js";
import {VTypes,RxUtil} from "@/assets/util.js";
export default{
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 () {
return calcRight(this);
}
},
mounted(){
this.valid(this.required);
},
methods: {
valid(chkReq_) {
var val=this.currentValue;
if(chkReq_ && this.required){
if(RxUtil.isEmpty(val)){
// this.iserror=true;
return false;
}
}
if(!this.vtype) {
// this.iserror=false;
return true;
}
var validFunc=VTypes[this.vtype];
if(typeof validFunc=="undefined") {
// this.iserror=false;
return true;
}
//验证
var rtn= validFunc.valid(val);
// this.iserror=!rtn;
return rtn;
},
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;
}
}
}
}
</script>
<style scoped>
.box-custom-component::after{
content: '';
display: block;
clear: both;
}
.box-custom-component input{
float: left;
width:calc(100% - .65rem);
}
.box-custom-component a{
float: left;
width: .65rem;
}
</style>
定义好组件后，使用方法如下：
1.import 组件
import RxInput from '@/components/common/form/RxInput';
2.注册组件
Vue.component(RxInput.name, RxInput);
3.使用组件
<rx-input v-model="data.email" permissionkey="email" :required="true" vtype="email" :readonly="false" :permission="" ></rx-input>
这里我们定义了v-model 我们通过将数据绑定到组件上实现数据的双向绑定。
实现双向绑定，需要注意两点：
1.定义一个value 的属性。
在上面组件的代码中，我们可以看到我们定义了一个value属性。
在只读的情况下 直接绑定显示。
<div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>
另外我们在data定义上，将value 赋值给了 currentValue 。这个值绑定到输入控件上。
2.数据改变时调用方法。
this.$emit('input', this.currentValue);
这样就实现了数据的双向绑定。
希望本文所述对大家vue.js程序设计有所帮助。