共计 678 个字符,预计需要花费 2 分钟才能阅读完成。
父组件向子组件传递数据: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 不会去父组件里找对应的变量给属性赋值。
当我们有自定义构造函数时,验证也支持自定义的类型。
子组件向父组件传递数据:通过 events 事件
正文完