Vue组件基础

目录

1.组件的概念

2.全局注册组件

3.局部注册组件

4.注册组件优化

---

1.组件的概念

组件: 是由html.css.JavaScript以及一些图片资源组成,能够实现局部的界面效果;Vue中的组件是可复用的 Vue 实例,就类似于小型的Vue实例

注意 1: template中只能有一个根标签,如果有多个标签,需要在外层套一个div

注意 2: 组件中的data必须是一个函数,不能是对象

因为组件的最大意义就是复用,如果data是对象形式,那么每一次使用这个组件,得到的都是同一个数据对象, *** 作其中一个组件中的数据,其他组件中的数据也会受到影响

data写成函数,每次使用组件,都会返回一个新的对象,不存在数据相互影响的问题

2.全局注册组件

语法 : Vue.component ( 'button-count' , {  }) 

参数1:组件名称 ;
参数2: 配置对象,与创建Vue实例的配置类似,但是没有el属性,因为组件是可以复用的,无需指定容器

全局注册的组件: Vue实例创建，组件就会被加载，就算没有使用到该组件,也会被加载,存在于内存中,在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

下面是创建并使用全局组件的例子

3.局部注册组件

1. 创建组件, const componentA = { }

2. 注册组件  在vue实例对象中进行注册 components : {组件名}

3.使用组件 使用组件标签

4.组件注册优化

当我们模板中的结构代码比较多的时候,可以抽离出来写在html中,但是

1,模板中的结构代码必须写在template标签里,template标签必须在容器之外

2.template标签里只能有一个根标签

3.组件的template属性值,是html中template标签的id名

4.容器中不要忘记写组件标签

示例代码如下: 

官网地址: 组件基础 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/components.html