單文件組件使用（.vue格式）

在當前模板使用一個組件，須滿足兩個條件：

1，引入組件，import xx from './xxx'

2，在components里面聲明（意思就是注冊該組件）

例如：

某個單文件組件myHead.vue

<template><header>{{ msg }}</header> </template> <script>export default{name: 'myhead',data (){return {msg: 'hello~~'}}} </script>

展示頁面的模板home.vue

<template><div id="app"><myhead></myhead></div> </template><script> //導入組件 import Myhead from './components/myHead' //下面components是聲明（注冊）組件 export default{name: 'app',components: {Myhead} } </script>

假如組件沒有被注冊，會出現以下錯誤提示：

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

<elcard>對應組件名

組件名稱命名大小寫需要注意：

1，展示頁面模板的import xxx 中的xxx必須與下面components聲明里面的名稱一致（包括大小寫），如果components聲明里面的名稱首字母是大小寫且其他字母小寫，在插入組件時可忽略大小寫，否則必須保持大小寫一致。

2，組件文件命名可忽略大小寫

3，被調用的組件export default 里面的name參數值，暫未發現需要用到的作用。

補充：

還有一點需要注意，vue模板只能有一個根對象，否則就會報錯

正確的：

<template><div id="app"><myhead></myhead></div> </template>

錯誤的：

<template><div id="app"><myhead></myhead></div><div>hello~~</div> </template>

頁面會提示錯誤：

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

總結

以上是生活随笔為你收集整理的pls-00302: 必须声明 组件_vue学习手册-单文件组件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。