Question

我正在尝试将自定义输入创建为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>

Answer 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>

Answer 2

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

使用与此类似的数组中的相关数据填写对话框

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

var currentDialog = 4
var dialogData = dialogs[currentDialog]

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

2 个答案: