如何防止 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
    }
});

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

这是正常行为还是我可以做些什么来使组件中的 jQuery 绑定保持活动状态？

编辑：

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

应用程序.js：

$(document).on('ready pjax:end', function() {

    // init vue.js and load components here

    $(document).trigger('vue:loaded');
});

some-query-file.js：

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

    // bind jquery stuff

});

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

Answer 1

当您创建一个组件时，Vue.js 会编译您的模板（内联或非内联）并将其插入到文档中（生命周期）。

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

例子

进入就绪函数

根实例之后

Answer 2

将 jquery 代码放在挂载的函数中

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-11-22 12:04:16

例子

解决方案2
-1 2017-04-26 06:33:55

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-22 12:04:16

例子

解决方案2 -1 2017-04-26 06:33:55

解决方案1
2 已采纳 2015-11-22 12:04:16

解决方案2
-1 2017-04-26 06:33:55