（视频笔记）05- 组件的props和样式问题

目录

一、组件的props

1、props是只读的

2、props 的default默认值

3、props的type值类型

4、props 的required属性

二、组件之间的样式冲突问题

1、scoped解决样式冲突

2、在父组件里面改子组件的样式 /deep/

---

一、组件的props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用props 可以极大的提高组件的复用性

它的语法格式如下：

Count组件用props声明了一个自定义组件，Left组件用到了Count组件，同时，在Left组件中，init的初始值为9。同理，可以在别的要使用Count中init的组件中定义不同的初始值。

 上图中，init在Left中的初始值为9，但是注意，此时打开Vue开发者工具，发现9是字符串！！！

<MyCount :init="9"></MyCount> //此时9是数字

用v-bind绑定一下init，init就变成数字了，因为v-bind里面写的是js，“ 9 ”就代表数字，“ ‘ 9 ’ ”才代表字符串。

1、props是只读的

上图中，在Left组件里使用init，如果需要修改init的值，就会报错

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props的值  

解决方法：

要想修改props的值，可以把props的值转存到data 中，因为 data 中的数据都是可读可写的！

注意逻辑：使用者(Left.vue)通过自定义属性init传9这个数值，Count.vue把这个值转存到count中

2、props 的default默认值

如果使用者在Right组件中没有写<MyCount :init="9"></MyCount> （即没有传值），init在该组件中的值就是undefined。在声明自定义属性时，可以通过default来定义属性的默认值。

在没有传值的时候，用的就是默认值；如果传值了，就是传过去的那个值

    注意——这时，props是对象的格式

3、props的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。示例代码如下：

4、props 的required属性

在声明自定义属性时，可以通过required选项，将属性设置为必填项，强制用户必须传递属性的值。此时必须传值，不然就报错。这个属性和默认值没关系，就算设置了默认值，如果不传值还是报错。

 

二、组件之间的样式冲突问题

1、scoped解决样式冲突

默认情况下，写在.vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
①单页面应用程序中，所有组件的DOM 结构，都是基于唯一的index.html 页面进行呈现的
②每个组件中的样式，都会影响整个index.html 页面中的DOM 元素

思考：如何解决组件样式冲突的问题？

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下。（scoped原理）

因此，解决方案：为了提高开发效率和开发体验，vue 为style 节点提供了scoped属性，从而防止组件之间的样式冲突问题。

2、在父组件里面改子组件的样式 /deep/

如果给当前组件的style 节点添加了scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

 h5是子组件用到的html标签

 同理，在使用第三方组件库（比如elment-UI）的时候，如果需要修改其样式，记得加/deep/