父组件向子组件传递数据:props(父传子通过属性名传)

常用于请求列表数据:要显示ul->li列表时,父组件向服务器请求数据,数据存放在父组件里,并把数据传递给子组件,然后子组件使用 v-for 遍历显示。(因为子组件不能直接访问父组件或vue实例的数据)

传递方法

  1. 父组件data定义数据
  2. 在子组件的HTML标签中,使用 v-bind 自定义属性,并把父组件数据的值赋给属性
  3. 注册组件时,添加 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       }}
  4. 在子组件的模板中使用数据。
属性如果不是通过v-bind绑定的,则绑定的是字符串,不是变量;vue不会去父组件里找对应的变量给属性赋值。

当我们有自定义构造函数时,验证也支持自定义的类型。

子组件向父组件传递数据:通过events事件