Vue组件基础用法详解
Vue组件概述
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己所需,使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。
在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例
组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通过Vue.js的声明式渲染后,占位符将会被替换为实际的内容
下面是一个最简单的模块示例
Vue注册组件
组件注册包括全局注册和局部注册两种
全局注册
要注册一个全局组件,可以使用Vue.component(tagName,options)
Vue.component('my-component',{ //选项 })
组件在注册之后,便可以在父实例的模块中以自定义元素
[注意]要确保在初始化根实例之前注册了组件
局部注册
通过使用组件实例选项components注册,可以使组件仅在另一个实例/组件的作用域中可用