单文件组件使用(.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>
假如组件没有被注册,会出现以下错