Vue中Props将父组件的数据传递给子组件

本文主要是介绍Vue中Props将父组件的数据传递给子组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. props 配置项

功能：让组件接收外部传过来的数据。

1.1 props 基本使用

1. 传递数据：

   <Demo name="xxx"/>
   

2. 接收数据：：

   props:['name']
   

接收到的prop最终都出现在：组件实例 —— vc上。

1.2 props 不可修改

props是只读的，不可修改。

1. 对于基本类型的props：一旦修改，直接就会报错，但页面也是会更新的。
2. 对象或数组类型的props：
   • 若修改的是整个对象或数组（地址值发生变化），会报错。
   • 若修改的是对象或数组中的内容（地址值不变），不会报错。

注意：props收到的属性，不能和data冲突，若冲突了，以props为主，且会有警告。

1.3 props 的三种接收方式

注意点：

1. 第一种方式（只接收）：

   props:['ming']
   

2. 第二种方式（接收 + 限制类型）：

   props:{ming:String
   }
   

   第三种方式（接收、限制类型、限制必要性、指定默认值）：

   props:{ming:{type:String, //类型required:true, //必要性default:'老王' //默认值}
   }
   

这篇关于Vue中Props将父组件的数据传递给子组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---