在一个页面上使用多个重的相同 VueJS 组件的正确方法是什么？答案

【问题标题】：What is the proper way to use multiple heavy same VueJS components on a page?在一个页面上使用多个重的相同 VueJS 组件的正确方法是什么？
【发布时间】：2017-01-20 16:38:38
【问题描述】：

我正在尝试将自定义输入创建为 VueJS 组件。它将具有<input type="text"> 字段和按钮。该组件必须实现这样的行为：您可以键入带有自动完成功能的文本或按下按钮打开带有数据库记录的模式对话框，然后选择一个。像这样的：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" @click="openModal">Choose</button>
    </span>
</div>

模态对话框将包含复杂的逻辑和大量的 HTML 代码。我想我会把模态对话框放在其他组件中。

毕竟我的自定义输入组件将在页面上的表格行中使用，例如：

<tr v-for="item in items">
    <td><input-component :item="item"><input-component></td>
</tr>

该表可能包含 10-30 行，这是一个问题 - 我应该从我的自定义输入组件中排除繁重的模式对话框代码，还是在 VueJS 中可以在 DOM 中有如此多的数十个重复项？

我应该选择什么变体：

1) 排除模态对话框，将其放在页面顶部一次，然后从自定义输入组件中调用它

<body>
    <modal-component></modal-component>
    <table><tbody>
        <tr v-for="item in items">
            <td><input-component :item="item"><input-component></td>
        </tr>
    </tbody></table>
</body>

2) 包含模态对话框并在 DOM 中有数十个重复代码

<body>
    <table><tbody>
        <tr v-for="item in items">
            <td><input-component :item="item"><input-component></td><!--now contains <modal-component></modal-component>-->
        </tr>
    </tbody></table>
</body>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

使用 dynamic component 并将组件类型绑定到响应式属性。

Vue.component('customer-dialog', {
	template: '<p>Customer Dialog</p>'
})

Vue.component('supplier-dialog', {
	template: '<p>Supplier Dialog</p>'
})

var app = new Vue({
  el: '#app',
  data: {
    dialog: null // initial dialog to use
  },
  methods: {
  	showDialog: function(d) {
    	this.dialog = d
        // additional dialog initialization code
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <component :is="dialog"></component>
  <button @click="showDialog('customer-dialog')">Customers</button>
  <button @click="showDialog('supplier-dialog')">Suppliers</button>
</div>

如果您想将关闭的对话框保留在内存中以便您可以保留它们的状态或避免重新渲染，您可以将动态组件包装在一个元素中。

<keep-alive><component :is="dialog"></component></keep-alive>

【讨论】：

对于两种变体中的哪一种，您建议使用动态组件？或者你的意思是我的案例的其他第三个实现？
我对您的建议考虑了一段时间，在我看来，这是实现多个包含模态组件的组件的最合适方式。

【解决方案2】：

整个页面只需使用一个模式对话框。

用数组中的相关数据填充对话框，如下所示

var dialogs = [
  { name: 'john', surname: 'snow' },
  { name: undefined, surname: undefined },
  ...
]

var currentDialog = 4
var dialogData = dialogs[currentDialog]

【讨论】：

当这个组件的工作完全依赖于这个代码时，你不认为将一些代码从组件中取出 - 是一个坏主意/做法吗？我知道这样的事情：忘记在页面上包含我的自定义输入组件和其他人为因素的模式。
只需创建一个包含这两个的包装器组件
我看不到如何在具有一个模式和多个自定义输入组件的变体中应用包装器组件。
基本上你把一个模态和一个表格放在一个组件中modal-table 然后你不能忘记模态，因为它和表格在一起。如果您需要自定义输入，您可以通过 prop 配置它们
是的，它可以工作。除了自定义输入和顶部和表格之间的更多代码外，只有我的页面在表格中有更多代码。我当然可以为此使用插槽，但我的应用程序有许多具有不同内容和代码的此类页面，这种方法对我来说似乎有点复杂。但你的建议值得考虑，真的。