VueJsコンポーネント化

VueJsコンポーネント化:

はじめに

表題とおりに、VueJsはとてもすごいライブラリーですけど、VueJsだけで開発すると、まだ足りないと思います。特殊な機能を入れたい時に、別のライブラリを使わないといけないです。

その時にVueJsコンポーネント化の変換が必要になると思います。以下のサンプリングはDatepickerとSelect2ライブラリをVueJsコンポーネント化することです。

Vue Component Datepicker

• 
  Datepickerライブラリー: https://jqueryui.com/datepicker/
  
• Html Template

  <script type="text/x-template" id="date-picker"> 
      <input placeholder="YYYY-MM-DD" style="width: 100%" type="text"> 
  </script> 

• Javascriptで定義

    Vue.component('datepicker', { 
        props: ['value'], 
        template: '#date-picker', 
        mounted: function () { 
            var vm = this; 
            // Init datepicker 
            $(this.$el).datepicker({ 
                dateFormat: 'yy-mm-dd', 
                onSelect: function(dateText) { 
                    vm.$emit('input', dateText); 
                } 
            }); 
        }, 
        watch: { 
            value: function (value) { 
                // update value 
                $(this.$el).val(value) 
            } 
        }, 
        destroyed: function () { 
            //$(this.$el).off().select2('destroy') 
        } 
    }); 

• htmlで実行

<datepicker v-bind:value="value" v-model="value"></datepicker> 

Vue Component Select2

• 
  Select2ライブラリ: https://select2.org/
  
• Html Template

<script type="text/x-template" id="select2-template"> 
        <select style="width: 100%"> 
            <slot></slot> 
        </select> 
    </script> 

• Javascriptで定義

    Vue.component('select2', { 
        props: ['options', 'value'], 
        template: '#select2-template', 
        mounted: function () { 
            var vm = this; 
            $(this.$el) 
            // init select2 
                .select2({ data: this.options }) 
                .val(this.value) 
                .trigger('change') 
                // emit event on change. 
                .on('change', function () { 
                    vm.$emit('input'); 
                }); 
        }, 
        watch: { 
            value: function (value) { 
                // update value 
                $(this.$el).val(value) 
            }, 
            options: function (options) { 
                // update options 
                $(this.$el).empty().select2({ data: options }) 
            } 
        }, 
        destroyed: function () { 
            $(this.$el).off().select2('destroy') 
        } 
    }); 

• Htmlで実行

options = [ 
    { 
        id: 0, 
        text: 'enhancement' 
    }, 
    { 
        id: 1, 
        text: 'bug' 
    }, 
    { 
        id: 2, 
        text: 'duplicate' 
    }, 
    { 
        id: 3, 
        text: 'invalid' 
    }, 
    { 
        id: 4, 
        text: 'wontfix' 
    } 
  ]; 
 
    <select2 :options="options" v-model="idValue"> 
    </select2> 

最後に

DatepickerとSelect2だけVueJsコンポーネント化をしましたが、他のライブラリもう同じやり方でコンポーネント化出来ますので、自由で試してくださいませ。



あと、実際にあるライブラリがVueJsコンポーネント化にされたので、すぐ使えます。

例えば:

- Vue Select https://sagalbot.github.io/vue-select/

- Vuejs-datepicker https://www.npmjs.com/package/vuejs-datepicker