溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
