脚本宝典收集整理的这篇文章主要介绍了

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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过