我是怎么学会vue的17父子组件的通信

33次阅读

共计 678 个字符,预计需要花费 2 分钟才能阅读完成。

父组件向子组件传递数据: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 事件

正文完
 0