vue.jsコンポーネント開発経験

方式一
この方法は最も簡単で、テンプレートをjsと一緒に書いて、cssは定外のファイル定義を必要とします
次に、スタイルコードを含まないラジオボックスコンポーネントのコードを示します.

props内はいずれも入力パラメータであり、パラメータは親コンポーネントに入力することもhtmlラベルに

に入力することもできる.

this.$emit('input', !checked); イベントinputを投げ出すという意味で、2番目のパラメータはイベントのデータ

です.

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,
        },
    });

使用方法1:双方向バインド:checked=「aaa」がpropsで転送され、@input=「aaa=arguments[0]」で転送されます.

"aaa" @input="aaa = arguments[0]" text="      ">checkboxtemplate22>

使用方法2:v-model構文糖を直接使用して双方向にバインドし、入力パラメータは必ずvalueと呼ばれ、イベントはv-modelがサポートするinputまたはその他であることに注意してください.

"aaa" text="      ">checkboxtemplate22>