Question

我的第一个Vue项目遇到了问题。我已经搜索了一段时间，但是找不到非常有用的东西。

我只是尝试创建一个父组件（“文件”）和一个子组件（“文件列表”），然后在文件中使用文件列表。这无法正常工作。我看不到错误，因为我已经添加了

export default {
  name: 'Filelist',

我唯一能得到的提示是从浏览器控制台

[Vue warn]: Unknown custom element: <Filelist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Files> at src/docs/categories/Files.vue
       <App> at src/App.vue
         <Root>

和

./src/App.vue (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue) 42:14-22"

export 'Filelist' was not found in '@/components/Filelist'

非常感谢

文件代码：

<template>
  <div class="">
    <h1>Hedajo</h1>
    <Filelist :msg="sometext"/>
    {{ sometext }}
  </div>
</template>

<script>
import { Filelist } from "@/components/Filelist.vue";

export default {
  name: "Files",
  components: {
    Filelist
  },
  data() {
    return {
      sometext: "hejo",
    };
  },
  methods: {

  }
};

</script>

<style scoped>
</style>

文件列表的代码：

<template>
  <component class="">
    {{ msg }}
    <p>hewhwe</p>
    {{ hedadi }}
    {{ testi }}
  </component>
</template>

<script>
export default {
  name: 'Filelist',
  props: ["msg"],
  data () {
    return {
      testi: "hedadi",
    };
  }
};
</script>

<style scoped>
</style>

Answer 1

这是默认导出，因此您无需提取它。试试

import Filelist from "@/components/Filelist.vue";

Answer 2

在使用FileList之前，您需要将其注册为组件。

<template>
  <div class="">
    <h1>Hedajo</h1>
    <Filelist :msg="sometext"/>
    {{ sometext }}
  </div>
</template>

<script>
import Vue from 'vue';
Vue.component('Filelist', require('@/components/Filelist.vue').default);
....

在这种情况下，您不需要import Filelist语句

Vue.js“在'@ / components / Filelist'中找不到导出'Filelist'

2 个答案: