如何在vue.js中使用jQuery 插件

2019独角兽企业重金招聘Python工程师标准>>>

vue.js中使用jQuery插件的问题

不能共享DOM，一旦vue掌握的DOM(即$.el)的控制权，他就会完全忽视jQuery对DOM的操作，

 

如何解决这个问题

使用component, 准确来说是特殊的component, 可以称为‘plugin wrapper’

优点有三：

• 利用vue的生命周期，初始化和销毁插件
• 利用props和event和Vue app的其他部分交互
• 利用v-once, 选择性更新组件

<div id="app">
  Date: <date-picker></date-picker>
</div>

Vue.component('date-picker', function() {
  template: '<input/>'
});

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

原文中是这么说的：

 

赋予component生命

在component已经插入到DOM中时，调用datepicker的初始化，在component销毁前，调用datepicker的销毁

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

this.$el指向该组件的根，input

 

给component定制内容

datepicker的config内容可以通过props传递给组件

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

<div id="app">
  <date-picker date-format="yy-mm-dd"></date-picker>
</div>

 

v-once

这个组件特定不会重新渲染，一旦交给了jQuery, vue就插不上手了，所以，使用v-once将组件static

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

 

 

礼尚往来，得把数据分享给vue

datepicker选择的数据，其实说到底，是vue的数据，只不过让jQuery打理页面的操作，所以，vue中得有个date的data

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>

 

使用自定义的方法将jQuery拿到的数据传递给vue

<div id="app">
  <date-picker @update-date="updateDate" date-format="yy-mm-dd" v-once></date-picker>
  <p>{{ date }}</p>
</div>

Vue.component('date-picker', {
  template: '<input />',
  props: ['dateFormat'],
  mounted: function () {
    var self = this;
    $(this.$el).datepicker({
      dateFormat: this.dateFormat,
      onSelect: function (date) {
        self.$emit('update-date', date)
      }
    });
  },
  beforeDestroy: function () {
    $(this.$el).datepicker('hide').datepicker('destroy');
  }
})


new Vue({
  el: '#app',
  data: {
    date: null
  },
  methods: {
    updateDate (date) {
      this.date = date
    }
  }
})

 

完美❤️❤️❤️

参考资料：http://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

 

转载于:https://my.oschina.net/u/2510955/blog/910409