gpt4 book ai didi

javascript - 如何防止 vue.js 覆盖组件中的 jQuery 绑定(bind)?

转载 作者:搜寻专家 更新时间:2023-10-30 22:49:08 25 4
gpt4 key购买 nike

我在现有项目中实现 vue.js,并将 vue 实例绑定(bind)到 body 标签上,id 为“app”。

到目前为止一切顺利,jQuery 和 Vue.js 配合得非常好。但是,当我创建组件时,这些组件中的所有 jQuery 绑定(bind)都不再起作用。

然而,根实例中的绑定(bind)仍在运行。

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 绑定(bind)有效?

编辑:

由于我使用的是 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 绑定(bind)。效果很好!

最佳答案

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

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

例子

Into the ready function

After the root instance

关于javascript - 如何防止 vue.js 覆盖组件中的 jQuery 绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33853452/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com