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等屬性不能被使用。