标签：vue app Vue num 110 template 组件 message 传值

普通父子组件传值

const app = Vue.createApp({
    data(){
        return{
            message:'hello world',
            num:110
        }
    },
    template:'<div>{{message}} <test :num="num"></test></div>',
});
app.component('test',{
    props:['num'],
    template:`<div>{{ typeof num}}</div>`
})
app.mount('#app')

带校验传值

const app = Vue.createApp({
    data(){
        return{
            message:'hello world',
            num:110
        }
    },
    template:'<div>{{message}} <test :num="num"></test></div>',
});
app.component('test',{
    props:{
        num:String
    },
    template:`<div>{{ typeof num}}</div>`
})
app.mount('#app')

此时传值为string类型，但是父组件定义的num是数字类型，因此控制台就会提示：
[Vue warn]: Invalid prop: type check failed for prop “num”. Expected String with value “110”, got Number with value 110.

当把 num:110 改为字符串 num:“110” 验证成功

支持的类型：Number、String、Boolean、Array、Object、Function、Symbol
required：必填
default：默认值，当父组件不传值时，使用默认值

const app = Vue.createApp({
    data(){
        return{
            message:'hello world',
            num:"hello"
        }
    },
    template:'<div>{{message}} <test ></test></div>',
});
app.component('test',{
    props:{
        num:{
            type:String,
            required:true,
            default:"nihao"
        }
    },
    template:`<div>{{ typeof num}}</div>`
})
app.mount('#app')

控制台：

vue@next:1312 [Vue warn]: Missing required prop: "num" 
  at <Test> 
  at <App>

validator验证

const app = Vue.createApp({
    data(){
        return{
            message:'hello world',
            num: 1235
        }
    },
    template:'<div>{{message}} <test :num="num"></test></div>',
});
app.component('test',{
    props:{
        num:{
            type:Number,
            required:true,
            default:520,
            validator: function(num){
                return num<1000;
            }
        }
    },
    template:`<div>{{ num }}</div>`
})
app.mount('#app')

此时传入的数是1235，大于1000，控制台报

[Vue warn]: Invalid prop: custom validator check failed for prop "num". 
  at <Test num=1235 > 
  at <App>

标签：vue,app,Vue,num,110,template,组件,message,传值
来源： https://blog.csdn.net/m0_47214316/article/details/118979331

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。