在与 Vue.js 相同的页面上使用 Knockout.js答案

【问题标题】：Use Knockout.js on the same page as Vue.js在与 Vue.js 相同的页面上使用 Knockout.js
【发布时间】：2019-01-27 18:43:30
【问题描述】：

您好，我有一个现有的项目，它使用了很多 knockoutjs。

我正在尝试将 vuejs 添加到项目中，并慢慢将所有内容及时移至 vuejs。

我已将 vue 添加到包含整个页面的包装器元素并创建了单个 vue 组件。

我的目标是在页面的任何位置使用该组件，但不会破坏我的淘汰代码。

我遇到的问题是，当我将 vue el 标记应用于包装页面和 ko.applyBindings 脚本的主要元素时，我的淘汰绑定没有被定义。（vue 元素工作正常，但所有 ko 脚本都会抛出错误）

我正在使用已编译的模板和带有 webpack-simple 的 vue-cli。

我对 vuejs 很陌生，但我认为这是因为 vue 试图解析页面 html 中的 knockoutjs 代码

控制台错误：

ReferenceError: Unable to process binding "slideVisible: function(){return !isShowBillingForm() }"
Message: isShowBillingForm is not defined
at slideVisible (eval at parseBindingsString (knockout-3.3.0.js:61), <anonymous>:3:65)

at init (slidevisible.js:15)
at knockout-3.3.0.js:65
at Object.u (knockout-3.3.0.js:35)
at knockout-3.3.0.js:65
at Object.o (knockout-3.3.0.js:10)
at g (knockout-3.3.0.js:65)
at h (knockout-3.3.0.js:63)
at k (knockout-3.3.0.js:63)
at h (knockout-3.3.0.js:63)

如果有人可以帮助我，那就太棒了

（我也将vue cdn添加到header中，并直接将vue标记添加到页面中，它们没有冲突）所以我猜它与编译的模板有关？

【问题讨论】：

您的错误是使用淘汰赛时非常常见的错误。这意味着您尝试将绑定应用到具有未在视图模型上定义的值的视图。即：在具有data-bind="slideVisible... 的元素的绑定上下文中没有isShowBillingForm 属性
当我从包装元素中删除 id="app" 时，所有的淘汰绑定都会起作用，这会将 vue 应用于页面。

标签： javascript vue.js knockout.js

【解决方案1】：

我已将 Vue 添加到包含整个页面的包装器元素中，并创建了一个 Vue 组件。

我相信这就是问题所在。当从遗留的 Knockout 迁移到 VueJS 时，你必须选择你想在哪里使用 Vue。

与 Knockout 相比，Vue 解析 DOM 的方式非常不同。它使用了虚拟 DOM 的概念，因此最终的 DOM 输出只是有效的 HTML，没有特定于框架的标记。这本质上会破坏任何绑定到它的 KO 代码。

所以我推荐的方法是找到您想要转换为 Vue 的应用程序片段，然后在 Knockout VM（或使用普通 JS）中实例化 Vue，如下所示：

import Vue from 'vue';
import MyVueComponent from 'libs/components/my-component.vue';

const propsData = {my: props};
const myComponent = Vue.extend(MyVueComponent);
new myComponent({el: '#some_element', propsData: propsData})

同样重要的是，请确保您告诉 KO 不要使用 stopBinding 处理程序（如 here 所述）来处理 Vue 绑定的 #some_element。

希望有帮助！

【讨论】：