组件参数校验和非props特性

作者: 椰果粒 | 来源:发表于2018-08-03 10:34 被阅读0次

组件参数校验与非props特性
9.组件参数校验和非props特性
组件参数校验和非props特性
组件参数校验与非props特性
组件参数校验与非props特性
组件参数校验与非props特性
六、组件参数校验与非props特性
组件参数校验与非props属性
vue组件参数校验和非prop特性
PropTypes与DefaultProps的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <!-- 
        组件参数校验
            父组件向子组件传值的时候，子组件可以校验父组件传递过来的数据类型

     -->
    <div id="app">

        <!-- 
            :content与content的区别
                :content表示是绑定了属性值，里边的内容就是一个表达式
                content是属性值
                :content="'hello world'" 表示字符串类型
                :content="123" 表示数字类型
                content="123" 表示字符串类型

         -->
        <counter :content="'hello world'"></counter>
    </div>
    <script>
        var counter = {
            props : {
                content : {
                    // 类型，是否必须传递这个值，默认值，自定义校验器（验证）
                    type : [String,Number],
                    required : true,
                    default : '',
                    // 长度大于5
                    validater : function(value){
                        return (value.length>5)
                    }
                }
            },
            template : '<div>{{content}}</div>'
        }
        var vm = new Vue({
            el : "#app",
            components : {
                counter : counter
            }
            
        })
    </script>
</body>
</html>