vue父传子（转）

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

<!-- 父组件 -->
<parent>
    <child :testData="age"></child>
</parent>

<script>
export default{
    data(){
      return{
        age:18
      }
    }
}
</script>

/* 子组件 */
export default{
    props:["testData"]
}

父组件中子组件标签上的属性名可以自定义，子组件props用对应的属性来接收。

子组件接收的父组件的值分为引用类型和普通类型两种：

　　普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

　　引用类型：数组（Array）、对象（Object）

基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。

如果传过来的值是简单数据类型，是可以在子组件中修改，也不会影响其他兄弟组件内同样调用了来自该父组件的值。

具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。

/* 子组件 */
export default {
    props:["testData"],
    data() {
        return {
            age : this.testData // 把传过来的值赋值给新的变量
        }
    },
    watch: {
        testData(newVal) {
            this.age= newVal    //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
        }
    }
}

注：如果不使用 watch 来监听父组件传递的 testData值，子组件中的 age 值是不会随着父组件的 testData 值进行改变，因为 data 中 age: this.testData 仅仅只是定义了一个初始值。

如果是引用类型的值，当在子组件中修改后，父组件的也会修改，因其数据是公用的，其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值，就相当于复制了一个副本，这个副本的指针还是指向父组件中的那个，即共享同一个引用。所以除非有特殊需要，否则不要轻易修改。

转自：vue组件之间相互传值的方式 - sugar_coffee - 博客园