Vue组件基础用法详解

Vue组件概述

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

组件是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容

下面是一个最简单的模块示例

Vue注册组件

组件注册包括全局注册和局部注册两种

全局注册

要注册一个全局组件，可以使用 Vue.component(tagName, options)

Vue.component('my-component', {
 // 选项
})

组件在注册之后，便可以在父实例的模块中以自定义元素 的形式使用

[注意]要确保在初始化根实例之前注册了组件

局部注册

通过使用组件实例选项components注册，可以使组件仅在另一个实例/组件的作用域中可用

组件树

使用组件实例选项components注册，可以实现组件树的效果

对于大型应用来说，有必要将整个应用程序划分为组件，以使开发可管理。一般地组件应用模板如下所示

v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来

Vue.component('my-component', {
 template: '
hello world!...
'
})

 

Vue组件的模板分离

在组件注册中，使用template选项中拼接HTML元素比较麻烦，这也导致了HTML和JS的高耦合性。庆幸的是，Vue.js提供了两种方式将定义在JS中的HTML模板分离出来

script

在script标签里使用 text/x-template 类型，并且指定一个 id

Vue.component('hello-world', {
 template: '#hello-world-template'
})

上面的代码等价于

Vue.component('hello-world', {
 template: '
Hello hello hello
'
})

下面是一个简单示例

template

如果使用