Vue-组件参数校验与非props特性

最新推荐文章于 2022-10-23 22:28:05 发布

chunchun1230

最新推荐文章于 2022-10-23 22:28:05 发布

阅读量149

点赞数

分类专栏： vue点滴

原文链接：https://blog.csdn.net/weixin_45497246/article/details/106102842

版权

vue点滴专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.组件参数校验——父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。

子组件通过props接收传递参数，并说明传递参数的属性：

type——参数类型
required——是否必传
default ——默认传的值
validator——自定义校验器，要求字符串长度等

2.props特性——子组件里声明了对父组件传递的属性的接收（父子组件之间有对应关系）
（1）传递的属性不会在控制台的dom标签上显示
（2）子组件模板可以通过插值表达式使用父组件传递的参数

3.非props特性——子组件里没有声明对父组件传递的属性的接收（使用场景较少）
（1）传递的属性会在控制台的dom标签上显示
（2）子组件模板不能通过插值表达式使用父组件传递的参数

<body>
    <div id="root">
        <child content="hello"></child>
    </div>
    <script>
        Vue.component('child',{
            props:{
                content:{
                    type:String,
                    // required:false,
                    // default:'default value',
                    validator:function(value){
                        return (value.length>7)
                }}
            },
            template:'<div>{{content}}</div>'
        })
        var vm = new Vue({
            el:"#root"
        })
    </script>
</body>

chunchun1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-组件参数校验与非props特性

1.组件参数校验——父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。子组件通过props接收传递参数，并说明传递参数的属性：type——参数类型 required——是否必传 default ——默认传的值 validator——自定义校验器，要求字符串长度等2.props特性——子组件里声明了对父组件传递的属性的接收（父子组件之间有对应关系）（1）传递的属性不会在控制台的dom标签上显示（2）子组件模板可以通
复制链接

扫一扫

专栏目录