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

Question

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

是否有推荐的方法来构造一个组件，该组件可以发出信号以加载具有给定 id 的宠物或打开一个空表单，还可以处理保存宠物并通知父级宠物已更新或创建？

Answer 1

为什么不对输入信号使用 props 并为输出信号使用发射事件？

在下面的示例中，编辑器组件对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-id initial 设置为null并且该对话框不会在服务器端呈现为打开状态。 此外，如果初始值始终为null ，您可以删除immediate: true