我是Vue.js的新手。我正在创建一个应用程序，其中我使用Vuetify和nuxt，并希望有一个可重用的编辑器模式。到目前为止，我发现我可以使用V-Dialog。我有一个宠物列表，我想要一个编辑器，该宠物弹出时，单击编辑操作链接每行。编辑器应该从后端加载pet对象并显示编辑器表单。当点击模式中的Save按钮时，宠物应该被保存并通知家长，以便它可以更新列表。我希望能够添加宠物在另一个页面（例如在一个人页面，我希望能够选择现有的宠物，也注册一个新的宠物）使用相同的编辑器。
有没有推荐的方法来构造一个组件，它可以用给定的id发送信号来加载pet，或者打开一个空表单，还可以处理保存pets和向家长发送pet已更新或创建的信号？
为什么不使用道具作为输入信号，而发射事件作为输出信号？
在下面的示例中，编辑器组件对petid是反应性的，您可以通过将petid设置为null来关闭对话框
在editordialog.vue中：
<template>
<v-dialog :value="petId !== null">
<!-- You editor -->
<v-button @click="onSave">Save</v-button>
</v-dialog>
</template>
<script>
export default {
props: {
petId: {
type: String,
default: '' // '' means create new pet
}
},
watch: {
petId: {
immediate: true,
handler(petId) {
if (petId === null) return
// fetch data or create empty data
}
}
}
methods: {
onSave(): {
const data = xx // your logic here
this.$emit('save', data)
}
}
}
</script>
而在父级中：
<EditorDialog pet-id="blah" @save="handler" />
您可以将pet-idinitial设置为null，并且该对话框不会在服务器端呈现为打开状态。此外，如果初始值始终为null，则可以删除immediate:true
