vue 父组件向子组件传值（VUE学习）
vue 父组件向子组件传值（VUE学习）1、父组件引用子组件<el-input type="text" :value="inputValue" style="width: 200px"></el-input>（2）父组件引用子组件与传值（1）子组件定义与使用1、定义子组件subOneComponent.vue，在props中定义父组件传递的值；props: { inputValue: { type: String // 变量类型 default: function () { // 默认返回值，可以在此处对传过来的值进行操作 return "" } }
在我们编写前端代码时，经常遇到的一种场景，子组件需要使用父组件的值，这种情况下，我们可以使用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传值，除了传字符串以外，还可以传递：数字、数组、布尔值、对象等。
