vue.js 组件开发经验

方式一

这种方式是最简单的，把模版与js写在一起，css需要定外的文件定义

下面是一个单选框组件的代码（不包括样式代码），其中：

props内都是传入的参数，参数可以在父组件中传入，也可以在html标签中传入

this.$emit('input', !checked); 是抛出事件input的意思，第二个参数是事件的数据

var checkboxtemplate = Vue.extend({
props: ['value','text','disabled'],
template: '<div class="s-input s-checkbox" :disabled="disabled" @click="enableClick">'
+ '<div class="s-checkbox-state checkboxName" v-html="state">'
+ '</div>'
+ '<span> {{text}}</span>'
+ '</div>',
components:{
'child':''
},
data:function(){
return {
checkboxOff: '<i class="s-ico s-ico-checkboxOff"></i>',
checkboxOn: '<i class="s-ico s-ico-checkboxOn"></i>',
checkDisabled: '<i class="s-ico s-ico-checkboxdisabled"></i>',
state:'',
}
},
created:function(){
if(this.disabled){
this.state = this.checkDisabled;
}

if(this.value){
this.state = this.checkboxOn;
}
else{
this.state = this.checkboxOff;
}
},
methods:{
enableClick:function(){
if(this.disabled) return;
var checked = this.state == this.checkboxOn;
if(checked){
this.state = this.checkboxOff;
}
else{
this.state = this.checkboxOn;
}
this.$emit('input', !checked);
}
}
});

下面是注册的代码：

new Vue({
el: '#test',
components:{
'checkboxtemplate22': checkboxtemplate
},
data: {
aaa: true,
},
});

使用方法一：
双向绑定中 :checked="aaa" 通过props传入，通过 @input="aaa = arguments[0]" 传出

<checkboxtemplate22 :value="aaa" @input="aaa = arguments[0]" text="开启启动登录"></checkboxtemplate22>

使用方法二：
直接使用v-model语法糖双向绑定，需要注意的是传入参数一定叫value，事件是v-model支持的input或者其他。

<checkboxtemplate22 v-model="aaa" text="开启启动登录"></checkboxtemplate22>