组件参数校验与非props特性

发布时间：2020-06-30 06:14:58 作者：梁十八
来源：网络阅读：307

父组件传递content="hello world"，子组件有权对其进行约束，或者说校验

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    //这依然是字符串 <br>
    <child1 content="1"></child1>

    //用:的方式，引号内的是js表达式，如果是数字，它就是数字类型 <br>
    <child2 :nums="2"></child2>

    <child3 other="123456"></child3>

    <child4 isProps="is false"></child4>
</div>
<script type="text/javascript">
    Vue.component("child1", {
        /*//如果要进行约束，就不要像这样是数组，改为对象咯
        props: ["content"],*/

        props: {
            content: Number //子组件接收的必须是数字类型
        },
        template: "<div>{{content}}</div>"
    });

    Vue.component("child2", {
        /*//如果要进行约束，就不要像这样是数组，改为对象咯
        props: ["content"],*/

        props: {
            nums: [Number, String] //子组件接收的必须是字符串类型或数字类型
        },
        template: "<div>{{nums}}</div>"
    });

    Vue.component("child3", {
        props: {
            //当然还可以是对象
            other: {
                type: String, //必须是字符串
                required: false, //非必须有
                default: "default value", //没有则给默认值
                validator: function(value) {
                    return (value.length > 5) //要求传入的内容长度必须大于5
                }
            }
        },
        template: "<div>{{other}}</div>"
    });

    Vue.component("child4", {
        //像这样没有props，则父组件向当前子组件传递的属性也使用不了
        template: "<div>{{isProps}}</div>"
    });

    var vm = new Vue({
        el: "#root"
    });
</script>
</body>
</html>

虽然规定只能传数字，但传了字符串还是能显示，但控制台会警告：
组件参数校验与非props特性
如果子组件中使用了父组件传过来的数据，而不用props，则用不到这个属性，会报错（不接收，怎能使用）：

组件参数校验与非props特性

相关阅读