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

【问题标题】：How do I create a dynamic editor form component in Vue如何在 Vue 中创建动态编辑器表单组件
【发布时间】：2020-12-16 19:07:45
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案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 初始设置为null，并且该对话框不会在服务器端呈现为打开状态。此外，如果初始值始终为 null，您可以删除 immediate: true

【讨论】：

这看起来很不错。