1.概述
组件是Vue中的一个重要概念,是一个可以重复使用的Vue是可以复用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例,所以它们与new Vue()接收相同的选项,例如data,computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
组件的特点:
- 组件可以进行任意次数的复用。
- 组件的data必须是一个函数,确保每个实例可以维护一份被返回对象的独立的拷贝,也就是任何一个组件的改变不会影响到其他组件。
2.组件的注册
任何组件在使用之前都得先进行组件的注册
组件注册分为:
全局注册和局部注册
2.1全局注册
语法:
Vue.component('组件名称', { })
第1个参数是标签名称,第2个参数是一个选项对象。全局组件注册后可以用在任何新创建的 Vue 根实例的模板中。
步骤:
- 定义组件配置对象
- 注册组件
- 使用组件
全局注册的特点:
一次定义,随时使用,一但声明完成,就可以在所有的组件中直接使用,无需引入和注册。
实例:
<body>
<div id="app">
<!-- 3.组件使用 -->
<my-a></my-a>
</div>
<script>
// 1.定义组件配置对象
let myA = {
template:`
<div>