使用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示例