Javascript 如何在Vue中创建动态编辑器表单组件

我是Vue.js的新手。我正在创建一个应用程序，其中我使用Vuetify和nuxt，并希望有一个可重用的编辑器模式。到目前为止，我发现我可以使用v-dialog。 我有一个宠物列表，我希望在单击每行上的编辑操作链接时，该宠物的编辑器会弹出。编辑器应该从后端加载pet对象并显示编辑器表单。单击模式中的保存按钮时，应保存宠物并通知家长，以便更新列表。我希望能够使用相同的编辑器在另一个页面上添加宠物（比如在个人页面上，我希望能够选择现有宠物并注册新宠物）

---

是否有一种建议的方法来构造一个组件，该组件可以被发送信号以加载具有给定id的宠物，或者打开一个空表单，还可以处理保存宠物和向父级发送宠物已被更新或创建的信号？

为什么不使用道具作为输入信号并发出事件作为输出信号

在下面的示例中，编辑器组件对

petId

起反应，您可以通过将

petId

设置为

null

来关闭对话框

在

EditorDialog.vue

中：

拯救
导出默认值{
道具：{
佩蒂德：{
类型：字符串，
默认值：'/''表示创建新宠物
}
},
观察：{
佩蒂德：{
立即：是的，
装卸工（佩蒂德）{
if（petId==null）返回
//获取数据或创建空数据
}
}
}
方法：{
onSave（）：{
const data=xx//此处显示您的逻辑
此.$emit（'save'，data）
}
}
}

在家长中：

<EditorDialog pet-id="blah" @save="handler" />

---

您可以将

pet id

initial设置为

null

，并且该对话框不会在服务器端显示为打开状态。另外，如果初始值总是

null

，则可以删除

immediate:true

，这看起来非常好。