Vue 13-组件参数校验、props特性-优快云博客

本文链接：https://blog.youkuaiyun.com/Lin16819/article/details/100991120

本文深入探讨Vue.js中组件之间的通信机制，重点讲解了props特性如何实现父组件向子组件的数据传递，包括属性验证、默认值设定及非prop特性的表现形式。通过实例代码，读者可以详细了解如何在Vue应用中正确使用组件通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">        
        <!-- 补充：如果要直接给组件绑定原生事件，用 @事件名.native="" -->
        <!-- <child @click.native="handleChange"></child> -->

        <child :content="'Hello Sukie'"></child>
    </div>
    <script>
        Vue.component('child', {
            props: {
                // 校验组件参数
                // 规定父组件传的content是Number类型
                // content: Number

                // 规定content是Number或String7
                // content: [Number, String]

                // 其他校验方式的写法
                content: {
                    // 规定content类型为String
                    type: String,

                    // 规定content参数是否必须
                    required: false,

                    // 设置content的默认值
                    // default: 'default value',

                    // 定义一个检验器，规定content长度大于5
                    // validator: function(value){
                    //     return (value.length > 5)
                    // }
                }
            },
            template: '<div>{{content}}</div>'
        })

        var vm = new Vue({
            el: '#root',
        })
        // prop特性：父组件传值给子组件的属性，该属性在子组件的props中已声明，如上面的content
        // prop特性的特点：1.传递过程如content="Sukie"不会在渲染的dom标签上显示
        // 2.当子组件接收了父组件传的属性如content，儿子可以通过插值表达式如{{content}}或this.content去获取该属性

        // 非prop特性：父组件传值给子组件的属性，子组件的props中没有声明该属性，则子无法获取父传的值
        // 非prop特性会展示在渲染的dom标签上        
    </script>
</body>
</html>