自定义组件和样式学习

一、使用组件3步
例如：APP.vue中使用另外两个组件Left.vue,Right.vue （3个页面）
1.在APP.vue中用import *** from **** 导入Left.vue、Right.vue页面
2.在APP.vue的js中和data同级注册，components{Left,Rirght}
3.注册完后可在APP.vue的div标签中使用和标签

二、组件全局使用需要在mian.js中注册

三、Vue自定义组件
Props:[‘变量名’]：通用属性，提高组件复用性，（当多个Vue页面需要调用同一个组件的某个值时需要在组件页面用props申明属性）

Props[‘自定义属性A’，’自定义属性B’，’自定义属性C’, ’其它属性’]

Props:是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值。
格式：第一种：Props:{变量名：{ default: 0, type: Number, required: true }} 第二种：props[‘自定义变量名’]
注释：default默认初始值 type:规定类型 required:必填项校验
第一种常用于校验

注：Props中的变量名不能直接修改，是只读的，所以需要将只读赋值给data里面的变量，例：count:this.props数组中定义的变量名. (props[‘自定义变量名’=只读，需要将只读变为可修改，所以把只读的赋值给data里面的count来接收，页面也展示count])

Component也可用作标签： 占位 is可改成:is冒号

样式冲突
mycount.vue是封装的组件，而left.vue和right.vue是使用组件，且在APP.vue中使用left和right标签。

例：将left.vue中有一个h3标签设置样式color:red，那么right.vue中h3标签样式也会变成红色文字，因为left.vue和right.vue都是在APP.vue中，所以样式冲突了。要求样式只对left.vue生效，其它组件不同步。

方法一、Left.vue 如下添加data-v-001设置后只会对当前页面样式生效了
在这里插入图片描述

方法二、在此添加scoped，不需要在标签加data-v-001，原理是底层会自动加上data-v-001，样式只对当前页面生效。

方法三、优化方法二使用样式穿透/deep/ （适用于在left.vue中修改mycount标签h5的样式）
当需要在父组件left.vue中设置mycount.vue的h5样式时，用scoped方法还不够，会看不到效果，还要用/deep/