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

最新推荐文章于 2024-08-31 18:36:54 发布

简单的Eddy

最新推荐文章于 2024-08-31 18:36:54 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： vue 前端

本文链接：https://blog.csdn.net/jz_say/article/details/104604823

版权

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

摘要由CSDN通过智能技术生成

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

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

实现：

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

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

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

2、在子组件中展示