props配置父子组件之间传递数据

原创已于 2024-02-17 23:06:21 修改 · 276 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #vue.js #前端

收录于

于 2024-02-17 20:42:48 首次发布

本文介绍了在JavaScript中处理组件属性(props)的三种方法：基础数组接收，添加类型限制并设置默认值以及规定必要性，强调了避免直接修改prop的重要性，以保持组件状态的稳定。

在这里插入图片描述

    // 第一种：简单的接收方式，直接采用数组接收。
    //props : ['brand','color','price']
    // 第二种：添加类型限制
    /* props : {
        brand : String,
        color : String,
        price : Number
    } */
    // 第三种：添加类型限制，并且还可以添加默认值，还可以添加必要性
    // 避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖
    // 注意：不要修改prop中的数据。
    props : {
        brand : {
            type : String,
            required : true
        },
        color : {
            type : String,
            default : '红色'
        },
        price : {
            type : Number,
            required : true
        }
    }

}
</script>