Question

我对Vue.js完全不熟悉，因此我觉得这个问题非常简单。这是我的Test.vue组件：

<template>
  <p>Hello Worldd</p>
</template>
<script>
export default {
  name : 'test'
}
</script>

我正试图展示这个＆＃34; Hello Worldd＆＃34;在另一个名为UserDevices.vue的组件中。以下是该文件的内容：

<template>
  <div>
    <test></test>
    <p>test</p>
  </div>
</template>

<script>
import Test from './Test'

export default {
  name: 'UserDevices',
  components: {Test}
}

我收到错误说：

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

found in

---> <UserDevices> at src/components/UserDevices.vue
       <App> at src/App.vue
         <Root>

我使用webpack scaffold作为模板。这不是正确的做法吗？

Answer 1

您正在使用.vue文件，这意味着vue-loader正在寻找<script>标记中包含的脚本部分。但是，因为您没有使用</script>关闭脚本标记，所以vue-loader将忽略.vue文件的该部分（没有任何警告）。

Vue组件的模板仍然会被加载，但Vue实例的模型（包含其所有数据属性，方法，组件等）都不会。这就是Vue无法找到<test>组件的原因。

另一个组件内的组件无法正常工作 - webpack - Vue.js 2

1 个答案: