Vue - 单文件组件不呈现

Question

我有一个小应用程序，其中将包含多个类似的表单。 为了避免多次编写相同的内容，我一直在尝试将表单模板拆分为另一个文件。 出于某种原因，它不呈现。 我试图用稍微不同的方式来写它，但还没有找到正确的方法。

Add.vue（我想显示表单的页面）

<template>
  <div>
    <basicform/> 
  </div>
</template>
<script>
import basicform from './basicform.vue';

export default {
  name: "Add",
  components: {
     basicform
  },

};
</script>

基本表单.vue

<template>
  <b-form @submit="submitForm" @reset="resetForm">
    <b-form-group label="Record name:">
      <b-form-input v-model="form.name"></b-form-input>
    </b-form-group>
    <b-form-group label="Year:">
      <b-form-input v-model="form.year"></b-form-input>
    </b-form-group>
    <b-form-group label="Artist:">
      <b-form-input v-model="form.artist"></b-form-input>
    </b-form-group>
    <b-button type="submit" variant="primary">Submit</b-button>
    <b-button type="reset" variant="danger">Reset</b-button>
  </b-form>
</template>

<script>
const basicform = {
  name: basicform,
  data: {
    form: {
      name: "",
      year: "",
      artist: ""
    }
  },
  methods: {
    submitForm(evt) {
      evt.preventDefault();
      //Functionality for form post
    },
    resetForm(evt) {
      evt.preventDefault();
      //functionality for form reset
    }
  }
};
export default basicform;
</script>

Answer 1

组件名称值应为字符串name: "basicform" ：

const basicform = {
  name: "basicform",
  data: {
    form: {
      name: "",
      year: "",
      artist: ""
    }
  },
  methods: {
    submitForm(evt) {
      evt.preventDefault();
      //Functionality for form post
    },
    resetForm(evt) {
      evt.preventDefault();
      //functionality for form reset
    }
  }
};
export default basicform;

这引发了一个错误

基本形式未定义

Answer 2

使用<basicform></basicform>而不是使用自终止标记 ( <basicform /> ) 呈现组件。

Answer 3

啊，我修好了。 我错误地定义了数据，这是正确的方法：

data () {
    return {
    form: {
      name: "",
      year: "",
      artist: ""
    }}

无论如何感谢您的回答！