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

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

 

如何解决这个问题

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

优点有三：

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

Date: 

Vue.component('date-picker', function() {template: ''
});new Vue({el: '#app'
});

原文中是这么说的：

 

赋予component生命

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

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

 

v-once

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

 

 

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

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

new Vue({el: '#app',data: {date: null}
})

{{date}}

 

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

{{ date }}

Vue.component('date-picker', {template: '',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/