Question

我在现有项目中实现vue.js并将body标签上的vue实例绑定为＆＃34; app＆＃34;。

到目前为止，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');
});

一些查询-file.js：

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

    // bind jquery stuff

});

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

Answer 1

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

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

实施例

Into the ready function

After the root instance

Answer 2

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

中

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

2 个答案:

实施例