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

Question

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

到目前为止一切顺利，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
    }
});

这里有一个 fiddle 来展示和证明我上面描述的内容： 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');
});

一些查询-file.js:

$(document).on('vue:loaded', function() {

    // bind jquery stuff

});

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

Answer 1

当您创建组件时，Vue.js 会编译您的模板（内联或非内联）并将其插入到文档中 (lifecycle)。

因此，您应该在 Vue 的根实例之后附加 jQuery 事件，或者将它们重新启动到 ready 函数中，因为组件会发生变化DOM.

例子

Into the ready function

After the root instance

Answer 2

将jquery代码放入挂载函数

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

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

javascript

jquery

vue.js

例子