Vue系列3(Vue的组件)
简介
组件系统是 Vue 的另一个重要概念。Vue的核心就是组件的使用。如果项目开发的比较多、大的情况，发现，很多页面之间其实存在一些公共的部分，可以被反复的进行使用。为了代码的复用，以及后期维护的方便，我们应该尽可能把公共的部分提取出来，然后形成一个独立的部分，然后供其他的部分使用。这个公共的部分我们称之为组件。Vue组件分为全局组件和局部组件。
组件的使用
全局组件和局部组件的区别：
Vue中的组件可以扩展HTML元素，用于封装可复用的代码，但是全局组件不需要挂载，但是不是很常用，尽量少在全局上使用组件，这样的话会影响浏览器的性能，而局部组件必须要手动挂载，不然会没有效果
一、全局组件的使用
全局组件使用范围：可以在页面中任何位置使用。
使用方式：
Vue.component(参数1，参数2)如下图：(引入组件)
二、局部组件的使用(项目中用的较多)
局部组件使用范围：只能在定义它的el中使用，不能在其他位置使用，否则就无法生效
使用方式如下图：
上图中中1处和2处引入组件，3处是局部组件的使用。
组件名称的大小写问题：
(1)官方强烈推荐要遵循W3C规范的自定义组件名，即组件名称全部使用小写字母且用 - 连接
(2)组件名称可以使用驼峰命名法，但是在使用的时候必须大写转小写，且用 - 连接。
自定义组件的结构
下图是一个自定义组件的组成：
如上图所示：
Vue自定义组件中的三个标签
1,上图中的3处的内容
< template > template >标签，用来写html代码2，上图中4处内容
<script>script>,用来js代码
注意：在自定义组件中，data不再是一个对象，而是一个function，且这个function必须返回一个对象。如上图中的2处
3，上图中5处的内容
< style > style >，用来写css样式组件间的传值
参考往期回顾中的Vue系列1(组件间的传值)
更多精彩请点击
1.Vue系列1(组件间的传值)
2.Vue系列2(路由-Vue Router)
始于2019年年底的新冠疫情一直持续到了今天，我们感叹之余，总还是要面对现实，假期过后就是企业、工厂等待复工的时候。现在有部分的企业开始复工了，相信陆续会更多。在这关键时刻我们不能掉以轻心，要养成出门戴口罩，勤洗手的习惯，爱护自己，爱护家人，爱护同事。不给国家添负担。
扫码关注苜蓿草
获取更多精彩内容
