十九、父子组件的通信(父组件向子组件传递数据)


在开发中,往往一些数据确实需要从上层传递到下层:

  • 比如在一个页面中,我们从服务器请求到了很多的数据。
  • 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
  • 这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。

Vue官方提到如何进行父子组件间的通信:

  • 通过props向子组件传递数据
  • 通过事件向父组件发送消息 

 一、props的基本用法

在组件中,使用选项props来声明需要从父级接收到的数据。props的值有两种方式:

  • 方式一: 字符串数组,数组中的字符串就是传递时的名称。
  • 方式二: 对象,对象可以设置传递时的类型,也可以设置默认值等。

    
  • 注意:在创建模板时,需要将  中写入一个容器,例如
    标签;
  • 在使用驼峰标识时,在模板标签引用中需要使用 “-” 符号将大写字母区隔开,在