目录
- Vue.js 组件
- 局部注册
- 全局注册
Vue.js 组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
局部注册
-
特点:只能在注册的组件内使用
-
步骤:
- 创建.vue文件(三个组成部分)
- 在使用的组件内先导入再注册,最后使用
-
使用方式:当成html标签使用即可
<组件名></组件名>
-
使用大驼峰命名法, 如 HmHeader
5.语法
// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default { // 局部注册components: {'组件名': 组件对象,HmHeader:HmHeaer,HmHeader}
}
全局注册
-
特点:全局注册的组件,在项目的任何组件中都能使用
-
步骤
- 创建.vue组件(三个组成部分)
- main.js中进行全局注册
-
使用方式:当成HTML标签直接使用
<组件名></组件名>
-
大驼峰命名法, 如 HmHeader
-
语法
Vue.component('组件名', 组件对象)
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,使用以下方式来调用组件:
<tagName></tagName>