vue 組件開發(fā)原理與實(shí)現(xiàn)方法詳解
更新時(shí)間：2019年11月29日 12:08:35 作者：自由港
這篇文章主要介紹了vue 組件開發(fā)原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件開發(fā)的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
本文實(shí)例講述了vue 組件開發(fā)原理與實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
概要
vue 的一個(gè)特點(diǎn)是進(jìn)行組件開發(fā)，組件的優(yōu)勢是我們可以封裝自己的控件，實(shí)現(xiàn)重用，比如我們在平臺(tái)中封裝了自己的附件控件，輸入控件等。
組件的開發(fā)
在vue 中一個(gè)組件，就是一個(gè)獨(dú)立的.vue 文件，這個(gè)文件分為三部分。
1.模板
2.腳本
3.樣式
我們看一個(gè)系統(tǒng)中最常用的組件。
<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
},
/**
* 驗(yàn)證表達(dá)式
*/
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;
}
//驗(yàn)證
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 我們通過將數(shù)據(jù)綁定到組件上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。
實(shí)現(xiàn)雙向綁定，需要注意兩點(diǎn)：
1.定義一個(gè)value 的屬性。
在上面組件的代碼中，我們可以看到我們定義了一個(gè)value屬性。
在只讀的情況下 直接綁定顯示。
<div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>
另外我們在data定義上，將value 賦值給了 currentValue 。這個(gè)值綁定到輸入控件上。
2.數(shù)據(jù)改變時(shí)調(diào)用方法。
this.$emit('input', this.currentValue);
這樣就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了深入理解Vue.js輕量高效的前端組件化方案 ,需要的朋友可以參考下
2018-12-12 
Vue輪播圖組件的封裝可通過封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時(shí)輪播、無限滾動(dòng)、手勢滑動(dòng)、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計(jì)算屬性等技術(shù)
2023-04-04 
vue3+vite應(yīng)用中添加sass預(yù)處理器問題
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02 
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11 
vue3中使用vuex和vue-router的詳細(xì)步驟
這篇文章主要介紹了vue3中使用vuex和vue-router的步驟，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-12-12 
Vue首頁界面加載優(yōu)化實(shí)現(xiàn)方法詳解
如果你也遇到在 vue 應(yīng)用中，首頁加載資源過多，導(dǎo)致加載緩慢的問題，下面的方法也許能幫到你，主要的處理思想是：讓首頁多余的資源能在需要它的時(shí)候再加載
2022-09-09 
Vue路由實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
根據(jù)登錄的角色不一樣,實(shí)現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-04-04 
Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決
這篇文章主要介紹了Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09