[Vue]组件传值中的参数校验和非props特性

最新推荐文章于 2024-08-28 08:14:12 发布

weixin_34148456

最新推荐文章于 2024-08-28 08:14:12 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5cd01d67f265da0379418ce9

博客介绍了组件传值中的非props特性，纠正了认为父传子一定要用‘冒号’的认知。指出写在组件中的键值对是否传值取决于子组件props是否接收，冒号只是将引号内容变为js表达式。

非props特性

之前我一直以为父传子，一定要使用‘冒号’，例如： :data，后来才知道，写在组件中的键值对，是否为传值取决于子组件中props 是否接收，冒号，只是将引号中的内容变成js表达式

<div id="app">
        <child content='wxf'></child>
</div>
script>
    Vue.component('child', {
        template: '<div>hello world {{content}}</div>',
        props: ['content'], // 一般写法
        props: {
            content: {
                type: String, // 期望传入值的类型，多类型可以用数组 type: [String, Number]
                required: false, // Boolen 是否必须
                default: 'zjj', // 默认值，当父组件未传入该值时，默认使用
                validator: function (value) { // 验证 此时形参 value 为父组件传入的值， 此处的规则为验证参数的长度，返回Boolen
                    return (value.length > 5)
                }
            }
        }
    })
    var vm = new Vue ({
        el: '#app',
    })
</script>
复制代码