我有一个numdata文档，已经根据vue文档进行了改编，以提供用于确认操作的模式。
vue.js如何简化此过程，以便可以重复使用组件？
我尝试将 x模板提取到其自己的组件中，但没有成功。
我想要的是能够使用一个模板并传递广告位和“ POST” /“ PUT” URL的内容。
目前我有3个<template>
<span>
<button class="btn btn-sm btn-info" @click="showModal=true">Edit</button>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
Custom Header
</slot>
</div>
<div class="modal-body">
<slot name="body">
Custom Body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
Custom Footer
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<modal v-if="showModal" @close="showModal=false">
<h3 slot="header" class="ml-auto mr-auto">Edit Resource Type</h3>
<div slot="body">
<p>This will replace all instances of {{originalName}} in the database.</p>
<input v-model="name">
</div>
<span slot="footer">
<button class="btn btn-sm btn-info ml-auto" @click="showModal=false">
Cancel
</button>
<button class="btn btn-sm btn-danger ml-1" @click="onEdit">
Update
</button>
</span>
</modal>
</span>
</template>
<script>
export default {
props: ['itemId', 'itemName'],
data() {
return {
showModal: false,
id: this.itemId,
name: this.itemName,
originalName: this.itemName
}
},
methods: {
onEdit() {
this.showModal = false;
axios({
method: 'PUT',
url: '/resource_types/'+this.id,
data: {id: this.id, name: this.name},
config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(response => {
history.go(0);
})
.catch(e => {
this.errors.push(e);
})
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 15px 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: red;
}
.modal-body {
margin: 15px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
，我需要更新/删除，并有6个组件来处理。似乎很多重复。我在考虑一种可重用的组件进行编辑，而另一种则用于删除。我
答案 0 :(得分：0)
不是您问题的直接答案，但太大而无法发表评论。
仅需要一个模态的另一种方法是利用单个模态主体中的匿名组件。
<component ref="modal" v-bind:is="modalView" v-bind:item="item"></component>
然后要更改模态内容，您只需更新modalView属性即可。
import editView from './components/modal/edit';
import deleteView from './components/delete';
showEditView() {
this.modalView = editView;
this.openModal();
}