用什么与子组件通信更好 - $emit 或 $ref？

Question

请告诉我。 有一个用于更改用户数据的页面。 此页面包含用于输入有关用户的信息的字段和提交按钮。 我需要创建一个执行相同功能的弹出组件。 表单本身现在将位于子组件中。 提交按钮现在已移至父组件。 因此，我需要将输入的数据传递给父组件。 一切都变得复杂，因为最初的数据来自服务器，其中包含先前输入的有关用户的信息。 因此，最初需要通过 props 将数据传递给子组件，然后，当从子组件更改它们时，将其传递给父组件。 但是如果有很多变数呢？ 例如：我需要创建 15 个道具，然后通过 $emit 传递这些数据。 数据本身通过 <input> 标记的 @input 事件或 <select> 标记的 @change 事件传递。 我想了三个选项，但我不知道哪个更好。 或者有些根本不应该使用。

1. 使用 $emit

父组件

<template>
  <Child 
    :first-props="user.first"
    :second-props="user.second"
    ....
    :fifteenth-props="user.fifteenth"
  />
  <button @click='submit'>Submit</button>
</template>

<script>
import Child from '@/components/Child.vue'
import { mapGetters } from 'vuex'
export default {
  data: () => ({
    first: '',
    second: '',
    ...
    fifteenth: ''
  }),
  components: {
    Child
  },
  computed: {
    ...mapGetters({
      user: 'user/getUser'
    })
  },
  methods: {
    submit() {
     //Sending data
    }
  },
  mounted: {
    this.$store.dispatch('user/getUserData')
  }
}
</script>

子组件

<template>
  <div>
    <input type="text" value="first" @input="username" />
    <input type="text" value="second" @input="name" />
    <input type="text" value="fifteenth" @input="surname" />
  </div>
</template>

<script>
export default {
  props: {
    first: {
      type: String,
      required: true
    },
    first: {
      type: String,
      required: true
    },
    ...
    fifteenth: {
      type: String,
      required: true
    }
  },
  methods: {
    username() {
     this.$emit('changeUsername', first)
    },
    name() {
     this.$emit('changeName', second)
    },
    surname() {
     this.$emit('changeSurname', fifteenth)
    }
  }
}
</script>

在这个变体中，我担心道具的数量。 我不知道这是否会以某种方式影响组件的速度和质量。

2. 使用 $ref

父组件

<template>
  <Child 
    ref='childComponent'
  />
  <button click="submit">Submit</button>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  data: () => ({
    first: '',
    second: '',
    ...
    fifteenth: ''
  }),
  components: {
    Child
  },
  method: {
    submit() {
      this.$refs.childComponent.submit()
    }
  }
}
</script>

子组件

<template>
  <div>
    <input type="text" v-model="first" @input="username" />
    <input type="text" v-model="second" @input="name" />
    <input type="text" v-model="fifteenth" @input="surname" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data: () => ({
    first: '',
    second: '',
    ...
    fifteenth: ''
  }),
  computed: {
    ...mapGetters({
      user: 'user/getUser'
    })
  },
  methods: {
    submit() {
     //Sending data
    }
  },
  mounted: {
    this.$store.dispatch('user/getUserData')
  }
}
</script>

在这个变体中，父子组件之间没有太多交互。 并且父组件仅触发提交方法。 另外，您不需要过多更改现有代码，因为您只需要移动按钮即可。 但在这里我担心：以这种方式应用 ref 不是一个错误的决定吗？ 第二个问题是单击按钮时数据的可用性。 更有可能的是子组件还没有收到必要的数据，或者只是还没有加载，而用户已经按下了按钮。 例如，父组件已经有一个主标题和一个提交按钮。 但是子组件仍在加载。 虽然这里的解决方案可以是使按钮仅在加载子组件后才可用：disabled="isDisabled"。

3. 使用 vuex

这个选项对我来说似乎是错误的，因为数据只会在这个组件内部使用。 而vuex在我看来只适用于全球案例。

我已经尝试了所有三个选项，它们都有效。 但我希望代码不仅可以工作，而且是正确的。

Answer 1

$ref和$emit的用途不同，它们之间通常别无选择。

选项 1 可以在孩子中使用单个数据道具：

<input
  type="text"
  :value="formData.first"
  @input="$emit('updateFormData', { key: 'first', value: $event.target.value }))"
/>

并合并父项中的更改：

  <Child 
    :formData="formData"
    @updateFormData="formData[$event.key] = $event.value"
  />

选项 2 在其当前的 state 中是可能的。或者，一个孩子可以是独立的并包含提交按钮，那么$ref就没有用了。 它可以发出submit事件，以防存在与表单提交相关联的业务逻辑不应移至子项。

选项 3 是可能的，但将全局存储用于本地目的是不合理的，可以使用 Vuex 动态模块实现本地存储。