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>&nbsp;{{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>