我是靠谱客的博主 殷勤含羞草,这篇文章主要介绍vue 组件开发原理与实现方法详解,现在分享给大家,希望可以做个参考。

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

概要

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

组件的开发

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

1.模板

2.脚本

3.样式

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<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 组件

复制代码
1
import RxInput from '@/components/common/form/RxInput';

2.注册组件

复制代码
1
Vue.component(RxInput.name, RxInput);

3.使用组件

复制代码
1
<rx-input v-model="data.email" permissionkey="email" :required="true" vtype="email" :readonly="false" :permission="" ></rx-input>

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

实现双向绑定,需要注意两点:

1.定义一个value 的属性。

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

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

复制代码
1
<div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>

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

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

复制代码
1
this.$emit('input', this.currentValue);

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

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

最后

以上就是殷勤含羞草最近收集整理的关于vue 组件开发原理与实现方法详解的全部内容,更多相关vue内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(152)

评论列表共有 0 条评论

立即
投稿
返回
顶部