什么是组件

组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用，因此，几乎任意类型的应用界面都可以看成一个组件树：

图片.png

组件的作用既可以从父作用域将数据传到子组件，也可以将把组件内部的数据发送到组件外部，可以实现互相传送数据

组件的使用

（一）组件使用之全局注册

我们在一级目录下新建一个全局注册.html文件，在该文件中介绍全局注册，我们还需引入vue.js文件

图片.png

按照上面的三步全局注册，运行出来的页面会报错

图片.png

报的错误意思就是说我们没有注册组件，那么这是为什么呢？

这里注册组件有两个坑：

第一：注册组件必须在Vue实例化之前

第二：这里对组件在文档中自定义标签不能用驼峰命名法命名，可采取小写且包含一个短杆的方式

正确写法如下：

图片.png

渲染为：

图片.png

（二）局部注册

实际项目中，我们不必把每个组件都注册到全局，我们可以通过某个Vue实例/组件的实例选项components注册仅在其作用域中可用的文件

在一级目录下新建一个局部注册.html

下图步骤就是注册一个简单的局部组件

图片.png

（三）组件使用之注意事项

1、

图片.png

<table>
    <my-row>....</my-row>
</table>

自定义组件<my-row>会被当做无效的内容，因此会导致错误的渲染结果，解决方法是使用特殊的 is 特性：

<table>
    <tr is="my-row">....</tr>
</table>

2、组件里面data一定要用function方式，不然会传址

如果我们有多个组件，而这些个组件各自有data对象，其实是共享一个data对象，因此会相互影响，所以要写成

data: function () {
    return {
        
    }
  }

这样每个组件都会有它自己的data对象，互相之间不会影响

而且data里面的数据，只能在组件的template里面才能生效

图片.png

组件的引入方式

（一）直接引入

模板中使用标签<my-component></my-component>引入

（二）通过is属性动态引入

图片.png

通过点击按钮来动态切换组件

图片.png 图片.png

keep-alive是vue特定用来做缓存的标签