Error in nextTick: “RangeError: Maximum call stack size exceeded“

 父

<template>
  <!-- 配置化 -->
  <div>
    <a-form-model ref="ruleForm" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-col
        :xl="6"
        :lg="24"
        :md="24"
        :sm="24"
        :xs="24"
        v-for="item in config"
        :key="item.id">
        <a-form-model-item :label="item.label">
          <component :is="item.fieldType" :field="item" v-model="formData[item.key]"></component>
        </a-form-model-item>
      </a-col>
      <slot name="buttons">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button type="default" @click="reset">重置</a-button>
      </slot>
    </a-form-model>
    <div>结果：{{ formData }}</div>
  </div>
</template>

 子组件

<template>
  <div>
    <a-select v-bind="fields" v-model="fields.result" @change="handleChange">
      <a-select-option v-for="item in fields.options" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'ASelect',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      fields: {}
    }
  },
  mounted () {
    if (this.field) {
      this.fields=this.field
      this.$emit('input', this.field.result)
    }
  },
  methods: {
    handleChange (val) {
      // v-on:input="inputValue = $event.target.value"
      this.$emit('input', val)
    }
  }
}

</script>

<style lang='less' scoped>

</style>

以为是值没有传过取，于是我声明data，接受这个值，就会报下面的错误

然后百度了一番，
发现这几个我都没有问题
第一：我没有使用递归
第二：也没有return 无结束，一直循环

最后终于找到了，问题就是（组件中的name名不要和组件名相同！！！！）我真的一整个大无语啊。。。

 解决问题后data里的fields是不需要，如果没有使用data媒介下，第一个我还不知道如何解决，一个低级的错误，排错用了一个多小时，而且方向还是错的，所以有时报的错误会误导我们。

子组件最终代码

<template>
  <div>
    <a-select v-bind="field" v-model="field.result" @select="handleChange">
      <a-select-option v-for="item in field.options" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'Select',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      fields: {}
    }
  },
  mounted () {
    if (this.field) {
      this.$emit('input', this.field.result)
    }
  },
  methods: {
    handleChange (val) {
      // v-on:input="inputValue = $event.target.value"
      this.$emit('input', val)
    }
  }
}

</script>

<style lang='less' scoped>

</style>