使用多个 Vue 实例代替组件 [英] Using multiple Vue instances instead of components

问题描述

我有一个旧的 .NET MVC 项目，其中的视图是用 HTML、引导程序和 jQuery 构建的.我即将用 Vue.JS 替换 jQuery，但我不确定最好的方法.

所有视图彼此都非常不同，可重用组件的想法不会有用，因为在不同视图中没有使用 HTML 或函数.

我认为最好的方法是保持 HTML 原样，而不是将其拆分为组件内的模板，我会在需要 Vue 的 HTML 的不同块上初始化 Vue 实例.

例如，我有一个包含 3 个表的视图，其中一个表可以被 2 个模态修改.

<div id=table1></div><div id=table2></div><div id=table3></div><div id=modal1></div><div id=modal2></div>

对于这个视图，我会为 table3、modal1 和 modal2 初始化新的 Vue 实例.对于数据和状态，我将使用共享存储:https://vuejs.org/v2/guide/state-management.html

这对我来说似乎是一个很好且简单的解决方案，但我也读到这是非常糟糕的做法，所以我仍然不确定.

这种解决方案是不好的做法吗?

解决方案

您可以毫无问题地做到这一点.如果您愿意，您可以使用全局对象或其他普通对象作为共享存储.您甚至可以将实例作为属性放入对象中:

var myInstances = {}var sharedState = {table1:{...}, table2:{...}, shared21: {...}, ...}//根据需要使用属性myInstances.table1 = 新的 Vue({数据:{ myState:sharedState.table1，共享:sharedState.shared21}，方法:{ open(){...} }//例如...})myInstances.table2 = 新的 Vue({数据:{ myState:sharedState.table2，共享:sharedState.shared21}，方法:{ openTable1(){ myInstances.table1.open();} }//触发table1实例中的函数open函数})

请记住，当您使对象的属性具有反应性时，此反应性功能将不会与其他实例同步.

这种方法效果很好，而且比使用组件更容易学习.它当然并不完美，使用组件的原因在 vuejs 文档中有说明.

I have an old .NET MVC project where the Views are built with HTML, bootstrap and jQuery. I'm about to replace jQuery with Vue.JS but I'm unsure of the best approach.

All views are very different from each other, the idea of reuseable components wont be useful as there are no HTML or functions that are used in different views.

I'm thinking that the best approach would be to keep the HTML as it is instead of splitting it up in templates within components, i would init Vue instances on different blocks of the HTML where Vue is needed.

Example, i have a view with 3 tables where one of the tables can be modified by 2 modals.

<div>
<div id=table1></div>
<div id=table2></div>
<div id=table3></div>
<div id=modal1></div>
<div id=modal2></div>
</div>

For this view i would init new Vue Instances for table3, modal1 and modal2. For data and state i will use a shared store: https://vuejs.org/v2/guide/state-management.html

This seem like a good and easy solution for me, but i've also read that this is extremely bad practice so i'm still unsure.

Is this solution bad practice?

解决方案

You can do it without problems. You can use a global object or another plain object as a shared store if you wish. You can even put the instances into an object as properties:

var myInstances = {}
var sharedState = {table1:{...}, table2:{...}, shared21: {...}, ...} // use properties as you wish

myInstances.table1 = new Vue({
data: { myState: sharedState.table1, shared: sharedState.shared21 },
methods: { open(){...} } // for example
...
})

myInstances.table2 = new Vue({
data: { myState: sharedState.table2, shared: sharedState.shared21 },
methods: { openTable1(){ myInstances.table1.open();  } } // triggers the function open function in table1 instance
})

Just keep in mind, that when you make properties of objects reactive, this reactive feature will not sync with other instances.

This approche works totally well and is much easier to learn than using components. It's of course not perfect and the reasons to use components instead are noted in the vuejs documentation.

这篇关于使用多个 Vue 实例代替组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！