使用vue組件包裝jquery插件

使用vue組件包裝jquery插件

• 在同一套UI中，一般咱們不提倡vue和jquery插件結合使用，但在項目重構中，咱們沒時間重寫vue組件，想重用特定功能的jquery插件，這個時候就須要將jquery插件包裝一下成vue組件。

jquery日期插件包裝成一個vue組件

1 使用vue組件包裝jquery插件有如下好處

• 利用vue的生命週期的鉤子函數初始化及卸載插件
• 經過props和event與Vue應用程序的其她組件進行通訊
• 組件能夠使用v-once選擇退出更新

<!--jquery日期組件的使用-->
Date: <input id="datepicker"/>
$('#datepicker').datepicker();

<!--使用vue包裝-->
Vue.component('date-picker', function() {
  template: '<input/>'
});

new Vue({
  el: '#app'
});

<div id="app">
  Date: <date-picker></date-picker>
</div>
複製代碼

• 實例化組件

<!--this.$el是由於組件根節點是input-->
Vue.component('date-picker', function() {
  template: '<input/>',
  mounted: function() {
    $(this.$el).datepicker();
  }
});
複製代碼

• 銷燬組件

Vue.component('date-picker', {
  template: '<input/>',
  mounted: function() {
    $(this.$el).datepicker();
  },
  beforeDestroy: function() {
    $(this.$el).datepicker('hide').datepicker('destroy');
  }
});
複製代碼

• 使用props傳遞配置

Vue.component('date-picker', {
  template: '<input/>',
  props: [ 'dateFormat' ],
  mounted: function() {
    $(this.$el).datepicker({
      dateFormat: this.dateFormat
    });
  },
  beforeDestroy: function() { ... }
});

<div id="app">
  <date-picker date-format="yy-mm-dd"></date-picker>
</div>
複製代碼

• v-onc
• v-once指令用於在組件具備大量靜態內容的狀況下緩存組件。這實際上使組件選擇退出更新。
• 這很是適合在咱們的插件組件上使用，由於它會有效地使Vue忽略它。jQuery將在應用程序的生命週期中對這個元素進行無阻礙的控制。

<div id="app">
  <date-picker date-format="yy-mm-dd" v-once></date-picker>
</div>
複製代碼

• 將數據從jQuery傳遞到Vue

<!--根實例一個日期屬性-->
new Vue({
  el: '#app',
  data: {
    date: null
  }
});
<div id="app">
  <date-picker date-format="yy-mm-dd" v-once></date-picker>
  <p>{{ date }}</p>
</div>

<!--子組件添加$emit觸發事件-->
mounted: function() {
  var self = this;
  $(this.$el).datepicker({
    dateFormat: this.dateFormat,
    onSelect: function(date) {
      self.$emit('update-date', date);
    }
  });
}

<!--根實例date-picker組件綁定update-date事件-->
<div id="app">
  <date-picker @update-date="updateDate" date-format="yy-mm-dd" v-once></date-picker>
  <p>{{ date }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    date: null
  },
  methods: {
    updateDate: function(date) {
      this.date = date;
    }
  }
});
複製代碼

參考連接

• vue和jquery安全使用
• demo示例