Vue 表单组件和条件渲染开销

Question

我已经看过并阅读了很多关于如何最好地处理 forms 的帖子。 我知道有很多不同的意见，这不是这个问题的重点。 我对 Vue 还很陌生，并且对总体框架有一个尖锐的问题，而不是如何实现 forms。

由于诸多因素，我们决定在我们的案例中实现 go 的最佳方法是创建一个带有 inputType 属性的通用 FormField 组件。 所以我们可能有这样的事情：

<form-field input-type="text" :value="someValue"></form-field>

在表单组件中，我们将使用<v-if="isText">或类似的。 显然，在这个特定组件中不会有大量的if语句（即文本、密码、复选框等），但我找不到任何关于条件渲染开销的信息。

使用条件渲染是否会产生大量开销，而不是将其分离为<my-checkbox-input> 、 <my-text-input> 、 <my-password-input> ？

Answer 1

好吧，正如你所说，有很多选择，我喜欢使用“组件”组件（很奇怪吧？），这种方法有点高级，但我喜欢它。

顺便说一句，使用 AI（很多 if）也不错，因为您正在渲染您需要的内容，请务必使用 v-if、v-else-if 和 v-else 语句，即：

<template>
  <div>
    <my-checkbox-input v-if="inputType === 'checkbox' />
    <my-text-input v-else-if="inputType === 'text' />
    <my-password-input v-else-if="inputType=== 'password' />
    <input v-else />
  <div>
</template>
<script>
export default {
  props: {
    inputType: {
      type: String,
      required: true
    }
  }
}
</script>

上面您可以看到一个基本示例，您应该将所需的道具或属性传递给每个输入。

现在，这就是我用来拥有一组使用 vue 组件“组件”的组件：

<component
  v-for="setting in additionalSettings"
  :key="setting.feature"
  :is="setting.component"
  v-model="setting.enabled"
  :class="setting.class"
  :label="setting.label"
  :description="setting.description"
  :input-description="getEnableOrDisableWord(setting.enabled)"
  :disabled="onRequest"
/>

要导入组件：

export default {
  name: "AdditionalSettingsContentLayout",
  components: {
    SelectInput: () =>
      import(/* webpackChunkName: "SelectInput" */ "../components/SelectInput"),
  },
}

我正在使用这种导入语法来添加代码拆分和延迟加载（我认为就是为了那个）

在这种情况下，我使用 json 文件作为组件的设置：

  settings: [
    {
      component: "SelectInput",
      enabled: false,
      label: "Toggle Personal Agenda feature on/off by event in ControlPanel",
      feature: "ENABLE_MY_AGENDA",
      class: "tw-mt-2 tw-mb-10",
    },
    {
      component: "SelectInput",
      enabled: false,
      label: "Enable/disable Meeting scheduling by event",
      feature: "ENABLE_MEETING_SCHEDULING",
      class: "tw-mt-2 tw-mb-0 tw-mb-10",
    },
    {
      component: "SelectInput",
      enabled: false,
      label: "Enable/disable Matchmaking by event",
      feature: "ENABLE_MATCHMAKING",
      class: "tw-mt-2 tw-mb-0",
    },
  ],

我正在使用 Vuex 来处理“启用”state 的更改/更新。 上面的示例仅使用 SelectInput 组件，但它可以是任何其他组件，只需确保为每个字段/输入传递所需的信息。

请务必在 forms 中逐步更改或更新。

在此处阅读有关它的更多信息