这是我参与「第五届青训营」伴学笔记创作活动的第 16 天

vue组件

vue是一个支持组件化开发的前端框架。规定组件的后缀名是.vue.组件是对UI结构的复用

vue组件的三个组成部分

每个.vue 组件都由3部分构成，分别是:

默认导出：export default{ }

注意：①.vue组件中的data不能指向对象，因为组件中的data必须是一个函数。所以要写成函数形式：data（）{ return xxxxxx}

②template里面只能有一个根元素

<style lang="less">

组件封装好之后，彼此之间是相互独立的，不存在父子关系。在使用组件的时候，根据比才的嵌套关系，形成父子关系、兄弟关系

①用import语法导入需要的组件——②使用component节点注册组件——以标签形式使用刚才注册的组件（第一个图在script中）

扩：配置path.Autocomplete下path.Autocomplete——点击右下角小齿轮——扩展设置——右上角打开设置——粘贴

注意：要直接定位到项目的文件夹打开，不能打开包含多个项目的文件夹

如组件A中注册F，F只能用在组件A中，不能用组件B中

扩：安装Vuter——输入<,选择第一个，回车可以快速生成模板

props是组件的自定义属性。因为组件使用的时候，各个组件使用它，但是又想有一些不一样，所以此时我嫩采用props。

语法格式

例如：
props['init']
组件使用时：<count init="*****"></count>
//像id，class是系统自己就有的属性，而init没有，所以叫自定义属性

注意！！！:init里面拿到的是字符串，可以结合v-bind（：）可以转化为数字型——：init="xxx"

props是只读的！！，程序员不能直接修改props的值

修改方法：要想修改props的值，可以把props的值转存到data中，

增添了required：true之后，在标签里面没有传就是错的。例如init里面增添，标签会报错，而不会报错

加<style scoped> 以后写样式都最好加上

使用例：/deep/ h5。