如何防止vue.js覆盖组件中的jQuery绑定

How do I prevent vue.js from overwriting jQuery bindings in components?

本文关键字：jQuery 绑定 组件 覆盖 何防止 vue js      更新时间：2023-09-26

我正在一个现有的项目中实现vue.js，并将vue实例绑定在id为"app"的body标记上。

到目前为止，jQuery和Vue.js的配合非常好。然而，当我创建组件时，这些组件中的所有jQuery绑定都不再工作。

但是，根实例中的绑定仍在运行。

HTML：

<body id="app">
<button class="button-app" @click="showMessage('app')">APP</button>
<some-component inline-template>
    <div>
        <button class="button-component" @click="showMessage('component')">COMPONENT</button>
    </div>
</some-component>
</body>

Javascript：

$('.button-app').on('click', function()
{
    console.info('jQuery: app');
});
$('.button-component').on('click', function()
{
    console.info('jQuery: component');
});
var Component = Vue.extend({
    methods: {
        showMessage: function(message)
        {
            console.info('vue.js component: ' + message);
        }
    }
});
new Vue({
    el: '#app',
    methods: {
        showMessage: function(message)
        {
            console.info('vue.js: ' + message);
        }
    },
    components: {
        'some-component': Component
    }
});

这里有一把小提琴来展示和证明我上面所描述的：https://jsfiddle.net/z7o8wkz7/2/

这是正常的行为吗？或者我可以做些什么来保持组件中的jQuery绑定有效吗？

编辑：

由于我使用的是pjax、jquery和vuejs，我已经通过以下方式解决了正确的加载顺序：

app.js:

$(document).on('ready pjax:end', function() {
    // init vue.js and load components here
    $(document).trigger('vue:loaded');
});

一些查询文件.js:

$(document).on('vue:loaded', function() {
    // bind jquery stuff
});

这样可以确保在加载pjax和初始化vue组件之后（重新）评估jQuery绑定。效果很好！

创建组件时，Vue.js编译模板（内联或非内联）并将其插入文档（生命周期）。

因此，您应该将jQuery事件附加在Vue的根实例之后，或者将它们重新初始化到ready函数中，因为组件将更改DOM。

示例

进入就绪功能

在根实例之后

将jquery代码放入已安装的函数

相关文章：