vuecli-vue自定义组件上的属性---选项 / 数据props，自定义属性props支持的类型有4种
组件就是一个标签，标签上有n多个属性。
你自定义的标签，组件，它身上是没有任何属性的。
先有组件，再使用组件，然后在组件身上，定义 各个属性
自定义组件上的属性是自定义的
(子组件 通过添加props属性，自定义自己身上要用的属性)
props中属性名，可以自定义
标签上，有什么属性，全在props上申明对应的属性，
props作用：用于接收父组件的传值！
当该组件作为标签使用时，该标签的属性在此props定义。
自定义属性props支持的类型有4种：type类型、default默认值、required必填项、validator:自定义校验函数
(通过prop属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的！)
一、先有组件，再使用组件
1、在views目录下，创建 自定义组件Button.vue
2、在App.vue组件中，引入Button.vue组件，使用它。
二、然后在组件身上，定义 各个属性
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
props类型
（1）以字符串数组形式列出的 prop，演示效果，如下所示：
props: ['w', 'h', 't', 'bac', 'tc','show'],
父组件，使用Button.vue组件
预览效果如下所示：
但是，通常如果你 希望 给 每个 prop 都有指定的值类型。这时，你可以 以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：
props的用法和data的用法一样的
data中的值获取方式
this.xxx
props中值获取方式
this.xxx
<template>
<button :style="style">{{title}}</button>
</template>
<script>
export default {
props:{
width:Number,
height:String,
title:String,
background:String,
textColor:String,
show:Boolean
},
data() {
return {
style:{
width:this.width,
height:this.height,
title:this.title,
backgroundColor:this.background,
color:this.textColor
}
};
}
};
</script>在父组件App.vue组件上使用Button.vue组件，并且在这个自定义组件身上添加n多个属性
<template>
<div>
<my-button width="200px"
height="80px"
title="提示"
background="#37f"
text-color="#fff"
show
></my-button>
</div>
</template>
<script>
import Button from '@/views/Button.vue'
export default {
components:{
'my-button':Button
}
};
</script>
<style lang="" scoped>
</style>父组件 传递过来的值，给子组件 去使用！！！
注意：
在父组件中，使用这个属性的时候，他里面的值，可以是字符串。字符串按照以下2种写法，都可以。
width=“200px”
变成
:w="'200px'"，这样写可以！！
还有一种，写法：
（2）以对象形式列出的 prop，例如：
自定义属性props支持的类型有一下4种：
props允许是对象，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
(1) type类型:(自定义属性的数据类型可以是8种，注意：这8种要能说出来！)
type:String/Number/Boolean/Object/
function/Array/Symbol/Date
https://cn.vuejs.org/v2/guide/components-props.html#%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5
(2) default默认值--any （自定义属性的默认值，可以是任意类型）
default:any
(3) required是否为必填项（这个值是否必须）（自定属性是否是必填项）
required：Boolean
(4) validator:Function 自定义校验函数 （对这个自定义属性进行校验）
当前props上的值，作为它的一个返回值
validator:Function(val){
，会将该prop值作为唯一参数代入
你一共可以取哪些值
includes(val) 传入的值
}
例如下面：
自定义属性，自己的类型是什么？
自己是否是必填项？
自己是否需要进行数据校验？
每个属性，各自设置各自的类型即可！！
重点分析：自定义校验函数的作用：
validator:function(val){ }
var
必须在取值范围内的 值，才不会报错!!!
自定义校验的功能是：
定义2个颜色用，includes(）判断, 外面传过来的值，是否是 数组中的 已经有的内容。
如果数组中有 这个值，就用这个指定的值。控制台，不会报错。
如果数组中没有 这个值，你用了这个值。显示的时候，这个值，可以显示出来，但是控制台，会报错。
演示效果如下所示：
如果数组中有 这个值，就用这个指定的值。控制台，不会报错。
如果数组中没有 这个值，你用了这个值。显示的时候，这个值，可以显示出来，但是控制台，会报错。
