什么是组件

组件本质：一个自定义的标签

普通标签：只有html结构

组件：有html结构，css样式，js业务逻辑

组件作用：复用

把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

==一个组件相当于一个vue实例==

一个组件(.vue文件)由三个标签组成

<template>标签,这里写组件的html结构

<script>标签，这里写组件的js代码

<style>标签，这里写组件的css代码

单文件组件 ： 把每一个组件放到一个独立的文件里

好处：(1)便于维护 (2)便于复用

之前的学习中，当一个页面非常复杂的时候，我们需要把所有的结构都写在一个html中，非常的不便于维护   

vue提供了一个专业的工具来帮我们将每一个组件放到一个独立的文件中管理

注册局部组件

导入局部组件 ： 在scrip标签中导入

import 组件名 from '组件路径'

挂载组件

在export default里面写一个属性components

export default {

components: {

"标签名": 组件名

}

}

使用组件 ： 像标签一样使用即可，组件可以理解为一个自定义标签

<组件名></组件名>

注册全局组件

 在main.js文件中

1.导入组件 import 组件名 from '组件文件路径'

2.注册全局组件 Vue.component('标签名', 组件名)

3.一旦注册全局组件之后，可以在任何组件直接使用，并且不需要导入和挂载

局部组件和全局组件区别

局部组件 ： 在哪里用就在哪里注册 （用一次，注册一次）

如果一个组件只在一两个页面用到，就可以局部注册（例如商品详情） 

全局组件 ： 在main.js中注册，任何地方都能直接使用 （注册一次，终生可用）     如果一个组件需要在很多个页面用到，就可以全局注册（例如，弹框、自定义按钮这些