问题:vue父组件如何向子组件中传递数据?
可以分为 静态传递 或者 使用 v-bind动态传递:
例如:
给 prop 传入一个静态的值:
![27453cca5d57b07bd582a53bc3b9dd2b.png](https://i-blog.csdnimg.cn/blog_migrate/cb4b4caab7535e6587e71bfc4704c628.jpeg)
也知道 prop 可以通过 v-bind 动态赋值,例如:
![a81e365e13b5c713326fde5b33ce151a.png](https://i-blog.csdnimg.cn/blog_migrate/29fd551cb04514ee56f8d82ac825db50.jpeg)
在上述两个示例中,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 prop。
子组件接受:
export default { props : ["title"] } //或者 export default { props : { title:{ type:string, default:"" } } }
![2e5996a9c5fa433239dc44946a8ffce1.png](https://i-blog.csdnimg.cn/blog_migrate/00e852af7887183428353c593d65f28d.jpeg)
传入一个数字:
![ea802a52e5e0d9700d404e9d64b98f48.png](https://i-blog.csdnimg.cn/blog_migrate/3118e139d747a9f8f50c51eba392f53d.jpeg)
传入一个布尔值:
![8d503eefdd4848b78869820e29552311.png](https://i-blog.csdnimg.cn/blog_migrate/08159bc0868876e51911c1231e640557.jpeg)
传入一个数组:
![215452cd3f3bb648af7cee9c318ddac9.png](https://i-blog.csdnimg.cn/blog_migrate/647128570ed2d2e6e6ef08b66f181da2.jpeg)
传入一个对象:
![8a7f7153b354e378602774f135089597.png](https://i-blog.csdnimg.cn/blog_migrate/14d7ad4e398c9278b5e68410173afdbf.jpeg)
传入一个对象的所有属性:
如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。
例如,对于一个给定的对象 post:
post: { id: 1, title: 'My Journey with Vue'}
下面的模板:
等价于: