vue 父子组件传值 props验证

最新推荐文章于 2024-06-05 21:18:27 发布

tianmeng1999

最新推荐文章于 2024-06-05 21:18:27 发布

阅读量464

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42448623/article/details/108032919

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

props文档

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件传值_props验证 </title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <my-child :list="plist"></my-child>
    </div>
    
    <template id="child">
        <div>
            props Number default : {{number}}
            <br>
            props String default : {{str}}
            <br>
            props Object deafult ：{{obj}}
            <ul>
                <li v-for="item in list" :key="item.id">{{item.name}}</li>
            </ul>
        </div>
    </template>
    <script>
        // 全局注册组件
        Vue.component('myChild',{
            template:'#child',
            props:{
                list:{
                    type: Array, // 类型  String Number Boolean Array Object Date Function Symbol
                    // default: []  //这个写法2.5以下没问题
                    default: function(){   // 类型是对象或者数组时 默认值必须是一个函数
                        return []
                    }
                },
                number: {
                    type: Number,
                    default: 100
                },
                str:{
                    type: String,
                    // required: true, //必传 
                    default: 'aaa'  // 默认值
                },
                obj:{
                    type: Object, 
                    default: function(){   // 类型是对象或者数组时 默认值必须是一个函数
                        return {name:'对象默认值 名称'}
                    }
                },

                // 多个类型
                duo:[Number,String],
                  
                // 自定义验证 name
                name:{
                    validator:function(value){
                        // 验证
                        // value !== null

                        // 返回验证结果
                        return true 
                    }
                }

                // 自定义 类型

            },
            data:()=>({

            })
        })
        
        new Vue({
            el:'#app',
            data:{
                plist:[{name:'aa',id:1},{name:'cc',id:2},{name:'gg',id:3}]
            }
        })
    </script>
</body>
</html>