Vue - 单个文件组件未呈现答案

【问题标题】：Vue - Single File Component not renderingVue - 单个文件组件未呈现
【发布时间】：2020-03-12 08:10:34
【问题描述】：

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

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

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

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

};
</script>

basicform.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>

【问题讨论】：

我建议使用export default {...} 而不是const basicform = {...}; export default basicform;

标签： javascript vue.js vuejs2

【解决方案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;

这会引发

的错误

基本形式未定义

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

还是谢谢你的回答！

【讨论】：