[TOC] >[success] # prop、event、slot 技巧 ~~~ 1.一个再复杂的组件，都是由三部分组成的：prop、event、slot，所以不管是 阅读他人的组件还是自己编写组件一定针对这三个地方去下手 ~~~ >[info] ## prop ~~~ 1.'prop' 定义了这个组件可配置的属性 2.'props' 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自 定义校验属性的值（简单说使用它的校验版本） 3.一些常用的'html' 标签属性例如'id','value' 可以直接在父组件调用子组件的 时候直接写在组件上，这些定义的值会覆盖原来组件定义的相同值，并且值 作用在组件最外层dom元素上。 4.'class' 和 'style' 是个例外会直接将在父组件调用时候,将子组件存在的属性'class' 和'style' c进行合并(指的也是最外层) 5.像'disabled' 这类有意义的属性，可以在组件调用时候直接使用，'props ' 中只用定义相同名字即可直接使用 6.如果不想让我们定义一些属性不在附加到子组件最外层标签，想只使用'props'定义好的属性， 这里需要设置属性 'inheritAttrs: false' ，产生效果除了class 和 style 依旧会像四条一样合并，但是 不会在出现第 2 ，5 覆盖和没有在props定义的属性直接使用的问题（默认'inheritAttrs: true' ） ~~~ >[danger] ##### 自定义一个button组件 -- 案例说明 ~~~ 1.当没用指定'inheritAttrs' 的时候默认为true,如果你没在子组件通过prop 定义将会产生以下效果 'class' 和 'style'，会自动和子组件的最外层dom元素上的class 和style 合并，其他元素标签会以 父组件为准并且替代子组件最外层dom上的相同元素 2.关闭 inheritAttrs （设置是false） 除class和style 外其他都不好被禁止掉没有上面说的效果 ~~~ ~~~ <template> <button id="6666" :disabled="disabled" :class="'i-button-size' + size" value="445" >ss</button> </template> <script> // props size 自定义的验证规则判断 function oneOf (value, validList) { for (let i = 0; i < validList.length; i++) { if (value === validList[i]) { return true; } } return false; } export default { //inheritAttrs: false, props: { size: { validator (value) { return oneOf(value, ['small', 'large', 'default']); }, default: 'default' }, disabled: { type: Boolean, default: false }, } } </script> ~~~ * 使用 ~~~ <template> <div> <my-button id="btn1" class="btn-submit" value="41"></my-button> </div> </template> <script> import myButton from '_c/my-button' export default { name: "testlison", components:{ myButton } } </script> <style scoped lang="less"></style> ~~~ * 没有关闭 inheritAttrs （默认是true）  * 关闭 inheritAttrs （设置是false）  * class 的说明  >[info] ## slot ~~~ 1.插槽看之前的插槽篇即可 ~~~ >[info] ## event ~~~ 1.通过 $emit，就可以触发自定义的事件在父组件事件，将子组件的内容通过 绑定的$emit传递，比较常见的就是子传父 2.第二中就是使用'native',这个是给组件绑定事件时候加的修饰符 2.1. 组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 `.native` 修饰符） 2.2. 等同于在子组件中，子组件内部处理然后向外发送click事件：`$emit("click".fn)` ~~~ >[danger] ##### 案例 ~~~ 1.下面案例中'myButton' 是一个组件,这个案例是直接给在父组件条用的子组件绑定了一个事件， 这个事件没有用'$emit' 子传父，而是直接绑定一个父组件的方法 2.使用的场合，当我们想直接触发某些组件的时候，比如这种'button'组件触发无非是要进行某 中确认，我们根不就不需要为此在做一次子传父的处理，只要直接让组件和我们的父组件中的 方法关联即可，直接使用'native' 修饰 ~~~ ~~~ <template> <div> <!--<my-button @on-click="parentClick"></my-button>--> <my-button @click.native="parentClick"></my-button> </div> </template> <script> import myButton from '_c/my-button' export default { name: "testlison", components:{ myButton }, methods:{ parentClick(val){ console.log(val) } } } </script> <style scoped lang="less"> </style> ~~~