Question

我创建了一个组件，该组件能够接受输入组件（文本字段，数字字段，日期选择器等），并创建与作为属性传递的值一样多的字段。因此，如果传入具有5个值的数组，则此组件将生成5个文本字段。您可以添加/删除字段，组件将通过发出事件来返回更新的值。

组件的必需示例代码（ ItemFieldList.vue ）

<template>
  <v-container>
    <!-- add new field button -->
    <v-container v-for="(value, index) in maskItemValues" :key="index">
      <slot name="fieldComponent" :value="value"></slot>
      <!-- remove field button -->
    </v-container>
  </v-container>
</template>

<script>
export default {
  props: {
    maskItemValues: {
      type: Array,
      required: true
    }
  },
  methods: {
    /* 
    other events
    */
    onFieldUpdated: function(index, newValue) {
      const newValues = [...this.maskItemValues];
      newValues[index] = newValue;
      this.$emit("fieldsUpdated", newValues);
    }
  }
};
</script>

关于广告位定义，我还必须添加此属性

:inputHandler="onFieldUpdated(index, ...arguments)"

但是我的应用程序崩溃了。它会陷入无尽的循环，我不知道为什么。

使用组件可能看起来像

<template>
  <ItemFieldList :maskItemValues="values" @fieldsUpdated="values = $event">
    <template v-slot:fieldComponent="{ value, inputHandler }">
      <v-text-field :value="value" @input="inputHandler"></v-text-field>
    </template>
  </ItemFieldList>
</template>

<script>
import ItemFieldList from "../../components/ItemFieldList";

export default {
  components: {
    ItemFieldList
  },
  data: function() {
    return {
      values: ["Foo", "Bar"]
    };
  }
};
</script>

应该生成两个字段。由于我无法传递inputHandler变量，因此这种方法行不通。

您可以在此处测试示例代码

https://codesandbox.io/s/vue-with-vuetify-eagles-jtfpj

那么有人知道为什么代码会陷入无休止的循环/如何在不崩溃应用程序的情况下添加此:inputHandler="onFieldUpdated(index, ...arguments)"吗？

Answer 1

我通过在使用组件上调用onFieldUpdated(index, ...arguments)解决了这个问题。我将广告位更改为（现在我也必须传递当前索引）

  <slot
    name="fieldComponent"
    :value="value"
    :index="index"
    :inputHandler="onFieldUpdated"
  ></slot>

和消耗组件现在使用参数调用函数

<template v-slot:fieldComponent="{ value, index, inputHandler }">
  <v-text-field 
    :value="value"
    @input="inputHandler(index, ...arguments)"
  ></v-text-field>
</template>

这可以解决问题。

但是请让我知道为什么这会导致堆栈溢出

  <slot
    name="fieldComponent"
    :value="value"
    :inputHandler="onFieldUpdated(index, ...arguments)"
  ></slot>

-

<template v-slot:fieldComponent="{ value, inputHandler }">
  <v-text-field 
    :value="value"
    @input="inputHandler"
  ></v-text-field>
</template>

将函数作为插槽变量传入时，组件崩溃

1 个答案: