VUE 学习——父组件传值给子组件

最新推荐文章于 2025-10-18 16:40:25 发布

原创

最新推荐文章于 2025-10-18 16:40:25 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

本文介绍了在Vue中如何通过props实现父组件向子组件的单向数据流通信。通过创建一个场景，展示了在父组件修改值后如何传递给子组件并显示。子组件通过定义props接收父组件的值，而父组件通过绑定值到子组件的属性来实现传值。此外，还提到了Vue中prop的更新特性以及可以传递的数据类型。

在我们编写前端代码时，经常遇到的一种场景，子组件需要使用父组件的值，这种情况下，我们可以使用props帮助我们进行父子组件间的通信。这里我们先模拟一个场景，展示如何使用。

场景：在父组件修改值，传递给子组件，子组件进行显示，如下图所示。

实现：

（1）子组件定义与使用；

1、定义子组件subOneComponent.vue，在props中定义父组件传递的值；

props: {            
    inputValue: {                
        type: String, // 变量类型                
        default: function () { // 默认返回值，可以在此处对传过来的值进行操作                                        
             return ""                
        }            
   }        
},

2、在子组件中展示