五. 组件的props
当封装好的一个子组件被其他多个不同父组件使用时，会发现子组件内定义的data数据在所有的使用它的父组件内的数值都是一样的，假如我第一个父组件内引用的子组件的初始数据为1，另一个引用该子组件的父组件也会显示一。
例如，封装了一个子组件，里面显示data里面的num：1在页面上。我想把这个组件用在第一个父组件时显示1，让他用在第二个父组件时显示2，如果不用props，则无法实现，他们都会显示1。
下面是一个案例：
有一个子组件Count.vue，实现点击按钮后会对原始数据自动增加1的功能。但是使用它两个父组件对里面原有地初始值都不同。
<template> <div> <h5>count组件</h5> <p>count的值为{{init}}</p> <button @click="count += 1">+1</button> </div> </template> <script> export default { //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值 //自定义属性的名字可以自定义，比如下面的init（只要名字合法就行） //谁用这个组件，就可以在组件内自定义这个init的值（父组件通过给子组件对props内定义的属性赋值即可）。eg：<mycount init="5"></mycount> //props是只读的。不要直接修改props里面的值，否则终端会报错。 props:['init'], data(){ return{ count:0 } } } </script> <style lang="less"> </style>
props与data节点同级。
下面是两个父组件对它的调用：
left组件：
<template> <div> 我是left组件 <hr/> <myCount :init='3'></myCount> </div> </template> <script> export default { name: 'left' } </script> <style> div{ float: left; width: 100px; height: 100px; } </style>
对组件的init值定义了一个值为3
right组件：
<template> <div> 我是right组件 <hr/> <myCount :init='8'></myCount> </div> </template> <script> export default { name: 'Right' } </script> <style> div{ float: left; width: 100px; height: 100px; } </style>
对组件的init值定义了一个值为8
上面有一个点要注意，就是我们使用组件给其设置一个init的props属性时，如果直接init=“8” ,这时设置的是一个字符串类型的init属性。如果要设置为数值的属性，就要为init添加v-bind属性绑定，即：或 ，这时里面的init属性才是数值型。这时因为v-bind里面的值为js的字面量。1就是数值1，而不是字符串。
那么问题又来了，如何实现点击+1按钮后如何数值加一呢？可以通过this.init为count赋值,然后页面上渲染count就行了。
下面是更改后的Count.vue子组件：
<template> <div> <h5>count组件</h5> <p>count的值为{{count}}</p> <button @click="count+=1">+1</button> </div> </template> <script> export default { //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值 //自定义属性的名字可以自定义，比如下面的init（只要名字合法就行） //谁用这个组件，就可以在组件内自定义这个init的值（父组件通过给子组件对props内定义的属性赋值即可）。eg：<mycount init="5"></mycount> props:['init'], data(){ return{ count:this.init } }, } </script> <style lang="less"> </style>
六.props的default默认值，
上面的的left和right在使用Count子组件的时候，都给它的init属性初始化绑定了一个默认的值，如：。但是如果有些用户如果就是不给Count组件的init属性初始化一个值呢（）？如果不传值，有些时候就希望它能有一个默认的初始值了。
在声明自定义属性props时，可以通过default来定义属性的默认值。并且props不能用数组形式来定义，而是用对象的形式来定义。
示例代码如下：
export default { props:{ 自定义属性名:{ default:默认值 } } }
如我们给Count组件中的init设定默认值为100：
<template> <div> <h5>count组件</h5> <p>count的值为{{count}}</p> <button @click="count+=1">+1</button> </div> </template> <script> export default { props:{ init:{ default:100 } }, data(){ return{ count:this.init } }, } </script> <style lang="less"> </style>
七.prop的type值类型
在声明自定义属性时，可以通过type来定义属性的的值类型，如果用户传递过来的值不符合此类型，则会在控制台报错。
示例代码如下：
export default { props:{ init:{ type:Number, default:3 } } }
八.props的require必填项
props属性里面的require是来规定某个属性是一个必填项,那怕组件的这个props属性有默认值，不自己手动传入，也会报错。
<script> export default { props:{ init:{ type:Number, default:3, require:true } }, data(){ return{ count:this.init } }, } </script>
九.组件组件的样式冲突问题
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
1.单页面应用程序俄中，所有组件的DOM结构，都是基于唯一的index.hml 页面来进行呈现的
2.每个组件中的样式，都会影响整个index.html页面中的DOM元素。
1.scoped的使用和底层实现原理
先来演示一下它的底层实现原理：
我们每个组件里面都标记上不同的data-v的自定义属性，然后通过[]属性选择器进行编写不用组件的样式
left.vue
<template> <div data-va-001> <h1 data-v-001>我是left组件</h1> <hr/> <myCount :init='0' data-v-001></myCount> </div> </template> <script> export default { name: 'left' } </script> <style> h1[data-v-001]{ color: red; } div[data-v-001]{ float: left; width: 100px; height: 100px; } </style>
right.vue
<template> <div data-v-002> <h1 data-v-002>我是right组件</h1> <hr/> <myCount data-v-002></myCount> </div> </template> <script> export default { name: 'Right' } </script> <style> div[data-v-002]{ float: left; width: 100px; height: 100px; } </style>
打开网页发现，只有left组件的h1变红了。
但是Vue帮助我们简化了，不用这么去写。只要给组件的style标签加上scoped就可以了。
<style scoped> h1{ color: red; } div{ float: left; width: 100px; height: 100px; } </style>
2.使用/deep/修改修改子组件中的样式
如果要在left组件里面把Count子组件的标题改为粉红色，把right组件里面的Count子组件保持原来的颜色。并且我们不要修改Count子组件里面的样式，该这么办呢？
<template> <div> <h1>我是left组件</h1> <hr/> <myCount :init='0'></myCount> </div> </template> <script> export default { name: 'left' } </script> <style scoped> h5{ color: pink; } h1{ color: red; } div{ float: left; width: 100px; height: 100px; } </style>
如果我们直接给left组件配置h5的样式的话，其实并不会生效，因为这个组件设置了scoped。
这时候就要用到/deep/了
进行如下的配置：
<style scoped> /deep/ h5{ color: pink; } h1{ color: red; } div{ float: left; width: 100px; height: 100px; } </style>
这时候就变成粉红色了
当使用第三方组件库的时候，如果有修改组件默认样式的需求，需要用到/deep/
