vue子组件给父组件传值（VUE学习）

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

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

场景原型

实现：<el-input type="text" :value="inputValue" style="width: 200px"></el-input>

（1）子组件定义与使用

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

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

2、在子组件中展示

<el-input type="text" :value="inputValue" style="width: 200px"></el-input>

（2）父组件引用子组件与传值

1、父组件引用子组件

import subOneComponent from "@/components/subOneComponent"; export default { name: 'App', components: { subOneComponent }, data() { return { inputValue: '', } }, }

2、在子组件中绑定

<subOneComponent :inputValue="inputValue"></subOneComponent>

再此：父组件中修改inputValue值后将会传递给子组件。

结果展示：

实现结果

VUE中父组件向子组件传递值是单向数据流：

所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。

vue传值，除了传字符串以外，还可以传递：数字、数组、布尔值、对象等。