大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说使用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示例
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13911.html
