theme: smartblue

一、组件概括

1.1、组件的特点

• 每个组件就是一个自定义标签
• 可复用
• 方便维护
• 方便拆分
• 每个组件都是一个独立的vm实例
• 每个组件作用域隔离「互不干扰」
• 有完整的生命周期
• 有自己的响应式数据和各种方法「事件」

1.2 组件调取

• 单闭合：不符合W3C规范，后面调取完成后，后面的视图不识别「避免使用单闭合」
• 双闭合：可以设置除组件规定内容外的其余内容「slot插槽」

1.3 Vue脚手架中的组件

• 放置在components文件下
• 组件名称最好采用驼峰命名

二、创建组件

2.1 创建全局组件

第一步：在components文件夹下新建一个GlobalCom.vue组件

• 组件中的data属性必须是一个函数，且必须返回一个对象
• 为什么是返回一个对象：组件的思想是复用性，每次调用这个组件时，返回一个新对象，这样会形成一个闭包，即我在这个组件中修改了data里面的值，也不会影响到其它组件「类似于单例设计模式」
• data这个函数不能是箭头函数，因为箭头函数中没有自己的this「我们在开发的时候需要用到this」
• 组件中的name属性是方便配置路由的时候使用
• 在vue2中组件最外层必须套一个div元素，且只能有一个「根元素」

第二步：在main.js中导入并注册组件

• 在main.js中基于import导入GlobalCom组件
• 使用Vue.component注册全局组件

第三步：在其他页面中使用全局组件

• 在页面中使用组件标签「注意要使用双闭合标签」

2.2 局部组件

第一步：在components文件下新建PartialCom.vue组件

第二步：在需要使用该组件的页面中导入、注册、书写组件标签使用该组件

三全局组件和局部组件的区别

• 全局组件：一般用于封装插件，全局组件需要在main.js中导入和注册，在其他页面中使用时，直接书写组件标签就可以，不需要再导入
• 局部组件：要想在其他组件中使用，就必须得在当前页面中导入，注册才可以

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 良雨 原文链接：https://juejin.im/post/7005575990353084430