Vue学习第三天，组件类型检查

参考：Prop — Vue.js 父组件=>对子组件传值是通过prop的方法来进行传递，在使用prop的时候，我们有时候需要对这个值进行检查，可能期待得到一个字符串或者需要对这个长度进行约束等。这个时候我们就需要一种方法，来进行自定义的检查。

首先先看一个简单的

        Vue.component('ul-lik', {
            props: ['names'],
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik :names="text"></ul-lik>',
            data: {
                text: 'hello'
            }
        }); 

上面就是一个简单的传值，我们以字符串数组的方法来进行定义。

但是需要对这个prop的类型进行约束应该怎么做呢？

        Vue.component('ul-lik', {
            props: {
                names: String,
            },
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik :names="text"></ul-lik>',
            data: {
                text: 'hello'
            }
        }); 

这样就做到对类型进行约束了，如果传递的数值不是字符串，会在调试台报错一个错误，但是并不会阻止他的显示。

也可以通过这种方法来对prop的类型进行多种定义，只要符合其中一种即可。

       Vue.component('ul-lik', {
            props: {
                names: [String, Object],
            },
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik :names="text"></ul-lik>',
            data: {
                text: 'hello'
            }
        }); 

如果需要提示这个prop值必须传递如何做到呢？

可以借助required属性来实现

       Vue.component('ul-lik', {
            props: {
                names: {
                    type: String,
                    required: true
                }
            },
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik :names="text"></ul-lik>',
            data: {
                text: 'hello'
            }
        });

这样就做到了必须输入，如果没有输入也会在控制台显式报错。

上面例子举得有点生硬了，更多时候我们会结合默认值来使用，只有这个值必须输入我们才会使用required属性。

定义默认值使用default属性来实现，下面是一个例子。

        Vue.component('ul-lik', {
            props: {
                names: {
                    type: String,
                    default: 'Vue'
                }
            },
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik></ul-lik>',
            data: {
                text: 'hello'
            }
        });

需要注意一点，如果默认值是数组或者对象，必须通过函数的方式进行返回。

        Vue.component('ul-lik', {
            props: {
                names: {
                    type: Object,
                    default: function() {
                        return {name: 'zhangsan'};
                    }
 
                }
            },
            template: '<div>{{names.name}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik></ul-lik>',
            data: {
                text: 'hello'
            }
        });

如果同时定义required属性和default呢?

        Vue.component('ul-lik', {
            props: {
                names: {
                    type: String,
                    default: 'Vue',
                    required: true,
                }
            },
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik></ul-lik>',
            data: {
                text: 'hello'
            }
        });

首先Vue会正常显示，但是同时也会在控制台打印一个错误，提示需要输入names。

但是我们有的时候需要对传递进来的一个数值进行判断，比如必须是字符数组之间的值，同时也必须满足文本长度大于一定，要实现这个功能，必须使用validator方法来实现。

        Vue.component('ul-lik', {
            props: {
                names: {
                    validator: function (value) {
                        var i = ['javascript', 'html', 'css', 'java'].indexOf(value);
                        if (i == -1) return false;
                        if (value.length < 5) {
                            return false;
                        }
                        return true;
                    }

                }
            },
            template: '<div>{{names}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik :names="text"></ul-lik>',
            data: {
                text: 'javascript'
            }
        });

这样就实现了一个类型和长度的判断，最后Vue官方还给出了一个构造函数的检查，通过instanceof来进行检查。

        function Foo(name) {
            this.name = name;
        }
        Vue.component('ul-lik', {
            props: {
                names: Foo
            },
            template: '<div>{{names.name}}</div>'
        });
        var vm = new Vue({
            el: '#box',
            template: '<ul-lik :names="text"></ul-lik>',
            data: {
                text: new Foo('zhangsan'),
            }
        });

 

最后：

1.type的类型包含下面几种：

String Number Boolean Array Object Date Function Symbol

2.null匹配任意类型

names: { type: null }

3.prop验证会在组件创建之前调用，data和component等属性不能被使用。

转载于:https://www.cnblogs.com/boses/p/9639136.html