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

Question

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

有没有推荐的方法来构造一个组件，它可以用给定的id发送信号来加载pet，或者打开一个空表单，还可以处理保存pets和向家长发送pet已更新或创建的信号？

Answer 1

为什么不使用道具作为输入信号，而发射事件作为输出信号？

在下面的示例中，编辑器组件对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