vue封装组件(全局和局部)

使用场景：当项目中有大量重复的结构、样式、函数等可以封装组件

image.png
image.png

比如说图片上的span标签需要写5次，但是通过封装的话只 要写1次就可以了

image.png

封装流程：

1. 把全局组件写完整
   image.png
   template里的内容需要用根元素<div></div>包裹起来
   组件里的data必须是一个带有返回值的函数，需要return，如果是对象的话会报错
   **new实例可以是对象 **

2.把重复的标签的地方替换成新封装的组件

image.png
每新增加一个封装组件，就相当于重新new了一个实例，因为封装的组件之前的数据互不影响

2.最后效果

image.png

局部组件封装

image.png image.png