Question

我有一个旧的.NET MVC项目，其中视图是使用HTML，bootstrap和jQuery构建的。我即将用Vue.JS取代jQuery，但我不确定最好的方法。

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

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

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

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

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

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

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

Answer 1

在我看来，通过使用单独的Vue s vs组件，您获得的收益并不高。你不能将Vue应用于表3和模态而不将它们包装在某些东西中。

如果您担心组件会破坏HTML结构，您可能需要查看inline-template。

Answer 2

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

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
})

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

这个approche工作得很好，比使用组件更容易学习。它当然不完美，而且在vuejs文档中会注明使用组件的原因。

使用多个Vue实例而不是组件

2 个答案: