本文实例讲述了vue 组件开发原理与实现方法。分享给大家供大家参考，具体如下：
概要
vue 的一个特点是进行组件开发，组件的优势是我们可以封装自己的控件，实现重用，比如我们在平台中封装了自己的附件控件，输入控件等。
组件的开发
在vue 中一个组件，就是一个独立的.vue 文件，这个文件分为三部分。
1.模板
2.脚本
3.样式
我们看一个系统中最常用的组件。
template
div
div v-if="right=='r'" {{value}} /div
div 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" 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",
pro凡科抠图: {
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
.ponent::after{
content: '';
display: block;
clear: both;
.ponent input{
float: left;
width:calc(100% - .65rem);
.ponent a{
float: left;
width: .65rem;
/style
定义好组件后，使用方法如下：
1.import 组件
import RxInput from '@/mon/form/RxInput';
2.注册组件
ponent(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'" {{value}} /div
另外我们在data定义上，将value 赋值给了 currentValue 。这个值绑定到输入控件上。
2.数据改变时调用方法。
this.$emit('input', this.currentValue);
这样就实现了数据的双向绑定。
希望本文所述对大家vue.js程序设计有所帮助。