另一个组件内的组件不起作用 - webpack - Vue.js 2

Question

我对Vue.js完全陌生，因此我觉得问题很简单。这是我的 Test.vue 组件：

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

我正在尝试在另一个名为 UserDevices.vue 的组件中显示此 "Hello Worldd"。这是该文件的内容：

<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 for vue 作为模板。这不是正确的做法吗？

Answer 1

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

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

另一个组件内的组件不起作用 - webpack - Vue.js 2

Component inside another component not working - webpack - Vue.js 2

vue.js

vue-component

vue-loader

vuejs2