脚本宝典收集整理的这篇文章主要介绍了Vue : props 使用细节(父组件传递数据给子组件)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

props使用细节

在Vue.js中我们可以使用 props 实现父组件传递数据给子组件，下面我们总结一下props的使用细节

1.基础类型检查
2.必填数据
3.默认值
4.自定义验证函数

其中每一项也有很多细节，具体看demo

Vue.component('my-component',{
    props:{
        // 基础的类型检查('null',匹配任何类型)
        propA：Number,
        // 多个可能的类型
        propB：[String,Number],
        // 必填的字符串
        propC:{
            type:String,
            required:true
        },
        //带有默认的数字
        propD:{
            type:Number,
            default:100
        },
        //带有默认值的对象
        propE:{
            type:Object,
            // 对象或数组且一定会从一个工厂函数返回默认值
            default:function(){
                return {message:'hello'}
            }
        },
        // 自定义验证函数
        propF:{
            validator:function(value){
                // 这个值必须匹配下列字符串中的一个
                return ['success','warning','danger'].indexOf(value) !==-1
            }
        }
    }
})

脚本宝典总结

以上是脚本宝典为你收集整理的Vue : props 使用细节(父组件传递数据给子组件)全部内容，希望文章能够帮你解决Vue : props 使用细节(父组件传递数据给子组件)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。