vue.js 组件开发经验

方式一

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

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

• props内都是传入的参数，参数可以在父组件中传入，也可以在html标签中传入
• this.$emit('input', !checked); 是抛出事件input的意思，第二个参数是事件的数据

var checkboxtemplate = Vue.extend({
    props: ['value','text','disabled'],
    template: '
'
            + '
'
            + '
'
            + ' {{text}}'
            + '
',
    components:{
        'child':''
    },
    data:function(){
        return {
            checkboxOff: '',
            checkboxOn: '',
            checkDisabled: '',
            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]" 传出

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

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

"aaa" text="开启启动登录">checkboxtemplate22>