美文网首页
props验证类型和默认值

props验证类型和默认值

作者: coffee1949 | 来源:发表于2019-06-02 14:12 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- 这里的msg111属性可以使用v-bind也可以不使用 -->
        <my-component :newv="true"></my-component>

    </div>
    <script type="text/x-template" id="my-component">
        <div>
            {{msg111}}

        </div>
    </script>
    <script type="text/javascript">
        var app = new Vue({
            data: {
                msg: '世界,你好!'
            },
            components: {
                myComponent: {
                    template: '#my-component',
                    //这里使用props接收属性,,是props不是prop
                    props: {
                        msg111: {
                            type: String,               //只能是字符串类型
                            default: '666'              //如果没传msg111属性,则默认是666
                        },
                        newv: {
                            type: [Boolean,Number],     //可以是布尔或数字
                            default(){                  //默认值可以是函数返回值
                                return '999'
                            }
                        },
                        oldv: {
                            validator(v){               //验证也可以是函数
                                return v===1 || v===0;
                            }
                        }
                    },
                    data(){
                        return{

                        }
                    }
                }
            }

        }).$mount('#app')


    </script>

</body>
</html>

相关文章

网友评论

      本文标题:props验证类型和默认值

      本文链接:https://www.haomeiwen.com/subject/ibjxxctx.html