20200430 Vue 数据验证

vue 组件中的驼峰式命名和短横线命名

在 html 中，'myComponent' 和 'my-component' 是一样的，因此，在组件中的 html 中使用必须使用短横线命名方式，在html中不允许使用驼峰式命名
在组件中，父组件给子组件传递数据必须使用短横线。
在 template 中，必须使用驼峰式命名。
在组件的 data 中，用 this.xxx 引用时，只能使用驼峰式命名。

数据验证

验证的 type 可以是：

String
Number
Boolean
Object
Array
Function

数据验证主要是对 props 传递进来的数据进行类型验证，并给它设定一些选项，比如给它指定一个默认值或是指定它必须为某一种数据类型

    <div id="app">
        <type-component :a="a" :b="b" :c="c" :d="d" :f="f" :g="g"></type-component>
    </div>

    <script>
        Vue.component('type-component', {
            props: { //要进行数据验证时需要把数组写法变为对象写法
                a: String, //必须是String
                b: [String, Number], //有多个类型是写为数组。表示 b 即可以是 string 也可以是 number。
                c: {
                    //规定必须是布尔类型，必须传递，默认值为true
                    type: Boolean,  //类型
                    required: true, //是否为必传项
                    default: true   //默认值
                },
                d: {
                    type: Array,  //数组类型
                    default() {
                        return [1, 2, 3] //数组类型的默认值必须写为一个函数，return一个默认值
                    }
                },
                f: {
                    //自定义的验证函数
                    validator(value) {
                        return value < 10
                    }
                },
                g: {
                    type: Function //函数类型
                }
            },
            template: '<div>{{a}}--{{b}}--{{c}}--{{d}}--{{f}}--{{g}}</div>',
            data() {
                return {

                }
            }
        })

        let app = new Vue({
            el: '#app',
            data: {
                a: '109',
                b: 100,
                c: false,
                d: [0, 1, 2, 3, 4],
                f: 3,
                g: this.add
            },
            methods: {
                add() {
                    console.log(111)
                }
            }
        })
    </script>

20200430 Vue 数据验证

vue 组件中的驼峰式命名和短横线命名

数据验证

验证的 type 可以是 ：

验证的 type 可以是：