父组件向子组件传递数据:props(父传子通过属性名传)
常用于请求列表数据:要显示ul->li列表时,父组件向服务器请求数据,数据存放在父组件里,并把数据传递给子组件,然后子组件使用 v-for 遍历显示。(因为子组件不能直接访问父组件或vue实例的数据)
传递方法
- 父组件data定义数据
- 在子组件的HTML标签中,使用 v-bind 自定义属性,并把父组件数据的值赋给属性
注册组件时,添加 props 属性,指定传入数据的类型、默认值、是否必须。
注意:
1.type支持的类型有:String、Number、Boolean、Array、Object、Date、Function、Symbol
2、默认值:认值必须是一个函数
3、props在子组件中有多种定义方式:既可以使用数组,也可以使用对象props写法1:传数组props:['cmovies','cmessages'] //cmovies、cmessages是变量名
props写法2:传对象传对象的好处:可以给变量指定类型、提供默认值props:{ cmovies:{ type:Array, //default:"aaaaa", //类型是对象或数组时,默认值必须是一个函数。2.5.17以下的低版本可以写成default:[] default(){ return [] }, required:true }}
- 在子组件的模板中使用数据。
属性如果不是通过v-bind绑定的,则绑定的是字符串,不是变量;vue不会去父组件里找对应的变量给属性赋值。
当我们有自定义构造函数时,验证也支持自定义的类型。