props的对象写法

2019-05-23 本文已影响0人小丘啦啦啦

一、说明
父组件通过属性绑定向子组件传值，绑定的属性名称需要在子组件的props属性身上定义一下，可以简单定义为数组。
数组方式对于其要接受的参数有什么要求并不清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样。props也可以进行一个预先检查。
props 属性指向一个对象来规定各个绑定属性值的校验规则。
二、检查规则
1、type
声明参数允许的数据类型（检查规则只有一个type时可以简写；当参数可以是多种类型的其中一个的时候，使用数组来表示），类型可以是：

String
Number
Boolean
Function
Object
Array
Symbol
(null 和 undefined 会通过任何类型验证)

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id='app'>
        <!-- 通过属性绑定方式把父组件数据传递给子组件内部 -->
        <com1 :parent-msg="msg"></com1>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'msg-父组件数据',
            },
            components: {
                com1: {
                    template: '<h1>这是子组件——{{parentMsg}}</h1>',
                    props: {
                        "parent-msg": {
                            type: String
                        }
                        // 简写
                        // "parent-msg":String
                        //多种类型用数组
                        // "parent-msg": [String, Number]
                    }
                },
            }
        });
    </script>
</body>

</html>

2、required
选项来声明这个参数是否必须传入，required: true表示必传。

 "parent-msg": {
      type: String,
      required:true
}

3、default
指定当父组件未传入参数时props变量的默认值。当type的类型为 Array 或者 Object 的时候default必须是一个工厂函数返回数据（对象和数组是引用类型）。

"parent-msg": {
    type: Object,
    // 当为对象类型设置默认值时必须使用函数返回
    default: function () {
        return {
            message: 'Hello, world'
        }
    }
}

4、validator
当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验，第一个参数即为传过来的值，用return作为函数返回。

 "parent-msg": {
    validator: function (value) {
        return value >= 0 && value <= 100;
    }
}

props的对象写法

猜你喜欢

热点阅读