### 一、父组件向子组件传值 即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。 在父组件的子组件标签中绑定自定义属性 ``` // 父组件 <user-detail :myName="name" /> export default { components: { UserDetail } ...... } ``` 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。 ``` // 子组件 export default { props: ['myName'] } /* props: { myName: String } //这样指定传入的类型，如果类型不对会警告 props: { myName: [String, Number] } // 多个可能的类型 prosp: { myName: { type: String, requires: true } } //必填的的字符串 props: { childMsg: { type: Array, default: () => [] } } // default指定默认值 如果 props 验证失败，会在控制台发出一个警告。 */ ``` **子组件接收的父组件的值分为引用类型和普通类型两种：** 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null） 引用类型：数组（Array）、对象（Object） 基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。 **常用类型的使用示例：** ``` // 组件参数 props: { percentage: { type: Number, default: 0 }, title: { type: String, default: '' }, show: { type: Boolean, default: false }, // 列配置 columnsConfg: { type: Array, default: () => { return [] }, }, // 数据项 rowdata: { type: Array, default: () => { return [] }, // required: true } // 对象参数 datas: { type: Object, default: () => { return {CompleteRate:50,PassRate:60,TrueRate:80} }, } }, ``` - 如果传过来的值是简单数据类型，是可以在子组件中修改，也不会影响其他兄弟组件内同样调用了来自该父组件的值。 - 具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。 ``` // 子组件 export default { props: ['myName'], data() { return { name : this.myName // 把传过来的值赋值给新的变量 } }, watch: { myName(newVal) { this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变 } }, methods: { changeName() { this.name = 'Lily' // 这里修改的只是自己内部的值，就不会报错了 }, } } ``` 注：如果不使用 watch 来监听父组件传递的 myName 值，子组件中的 name 值是不会随着父组件的 myName 值进行改变，因为 data 中 name: this.myName 仅仅只是定义了一个初始值。 如果引用类型的值，当在子组件中修改后，父组件的也会修改，因其数据是公用的，其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值，就相当于复制了一个副本，这个副本的指针还是指向父组件中的那个，即共享同一个引用。所以除非有特殊需要，否则不要轻易修改。 原文：https://www.php.cn/vuejs/474702.html