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(）判断, 外面传过来的值，是否是 数组中的 已经有的内容。

如果数组中有 这个值，就用这个指定的值。控制台，不会报错。

如果数组中没有 这个值，你用了这个值。显示的时候，这个值，可以显示出来，但是控制台，会报错。

演示效果如下所示：

如果数组中有 这个值，就用这个指定的值。控制台，不会报错。

如果数组中没有 这个值，你用了这个值。显示的时候，这个值，可以显示出来，但是控制台，会报错。