什么是组件?
组件 (Component)
是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码
。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
创建一个myheader.vue子组件
<template>
<div>
myhader
</div>
</template>
<script>
export default {
name: "myheader",
return(){
}
}
</script>
在自父组件组件里面注册子组件
- 引入子组件
import myheader from './myheader.vue';
- 注册组件
<script>
export default {
data(){
return{
//是否折叠
isCollapse:false,
username:'',
}
},
//注册组件标签
components:{
'myheader':myheader,
},
}
</script>
- 导入组件
<template>
<div>
<myheader></myheader>
</div>
</template>
注意
:
1、在子组件中:<div></div>
是必须要存在的
2、在父组件中:首先要引入子组件 import myheader from ‘./myheader.vue’;
4、父组件中 components: { 是声明子组件在父组件中的名字