为什么使用Vue组件?
各自独立 便于复用 可维护性高
一. 组件化开发
组件化开发 指的是: 根据封装的思想 把页面上 可重用的部分 封装为组件 从而方便项目的开发和维护
一个页面 可以拆分成一个个组件 一个组件就是一个整体 每个组件 可以有自己独立的结构 样式 和 行为
前端组件化开发的好处:
- 提高了前端代码的复用性和灵活性
- 提高了开发效率和后期的可维护性
二.组件的注册
App.vue 根组件 这个是一个根组件
App.vue 根组件内 还可以写入一些小组件 而这些组件 要使用 就需要先注册
注册组件有两种注册方式 --> 全局注册 局部注册
-
被全局注册的组件 可以在任意的组件模板范围内 使用 通过 Vue.component()
-
被局部注册的组件 只能在当前注册的组件模块范围内使用 通过 components
1. 局部注册
把独立的组件封装一个 .vue文件中 推荐放到 components 文件
通过组件的 components 配置 局部注册组件
import 自定义组件名 from '组件路径地址'
export default {
// data methods filters computed watch
components: {
组件名: 组件
}
}
2. 全局注册组件
在 components 文件夹中创建一些新的组件
在 main.js中通过 Vue.component() 全局注册组件
import 自定义组件名 from '组件路径地址'
// 全局注册
Vue.component(名字, 组件)
使用
<template>
<div>
<!-- 组件注册好了,就跟使用html标签一样了 -->
<组件名></组件名>
</div>
</template>