vue-组件基础

一、什么组件

组件 (Component) 是 Vue.js 的重要组成部分。能够让你在复杂的应用中拆分成独立模块。使用组件可以扩展 HTML 元素，封装可重用的代码，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。

Vue提供一个组件系统，提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树

开发组件时应当遵循这三点：

• 高内聚

• 低耦合

• 高可用

所谓高内聚，低耦合要求组件内部应当包含所有组件需要的资源，尽量不与其他模块互相依赖，开发者能简单的即插即用。

而高可用则有多种含义：得跑的起来，经得起测试，易于扩展

二、基本使用

1、概要

Vue的组件使用基本分为三个步骤：

1. 创建组件构造器

2. 注册组件

3. 使用组件

image

2、基础使用

1. html

2. js

3. 注意

   • 对于组件命名，尽量使用小写，并且包含一个短杠例如my-component,也可以使用MyComponent

   • 一定要在挂载的元素区域使用

   • 组件是可以复用的

三、注册方式

1、说明

组件常见的注册方式有两种,实际上有7种左右:

1. 全局注册

2. 局部注册

2、全局注册

1. 说明

   使用Vue.component()可以注册一个全局组件，这样该组件可以在任意Vue实例下使用,

   或者另外一种注册方式，通过 全局API：Vue.extend()

2. 语法格式

   Vue.component(id, [definition] )

3. 参数说明

   参数	参数类型	说明
   id	字符串类型	设置组件的名字
   definition	方法或者Object	组件

4. 示例代码

   
    
    
   
    
    
    
   
    
    
    ​
    
    ​
    
    ​
    
   
    
   小明修改姓名
    
    ​
    
   
    
   小明修改姓名
    

5. 总结

   • 组件必须有一个templtae选项

   • 全局组件必须写在new Vue()创建之前，才在该根元素下面生效

   • 模板里面第一级只能有一个标签，不能并行

3、局部注册

1. 说明

   如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。

2. 示例代码

   ​
    
   
    
    
    
    ​
    
    ​
    
   
    
   这个是局部注册组件
    

4、使用script或template标签

1. 说明

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

2. 使用script(了解)

   
    
    
    ​
    
    ​
    

3. 使用template

   
    ​
    
   
    
    
    ​
    
    ​
    

4. 总结

   在理解了组件的创建和注册过程后，我建议使用