十九、父子组件的通信（父组件向子组件传递数据）

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

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

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

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

 

 

 一、props的基本用法

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

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

    <div id="app">
      <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
    </div>

    <template id="cpn">
      <div>
        <p v-for="item in cmovies">{{item}}</p>
        <p> {{cmessage}}</p>
      </div>
    </template>
    <script>
      //父传子
      const cpn = {
        template: "#cpn",
        //props: ["cmovies","cmessage"],
        props: {
          // //1. 类型的限制
          // cmovies: Array,
          // cmessage: String
          
          // //2. 提供一些默认值，以及必传值
          cmessage: {
            Type: String,
            //当没有进行父级传值时会使用默认值
            default: "aaaaaa",
            // required 必须传的值
            required:true
          },
          cmovies: {
            Type: Array,
            //类型是对象或者数组时，默认值必须是一个函数
            default(){
              return []
            } 
          }
        },
        data(){ return {}},
        methods: {}
      }

      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World",
          movies: ["泰坦尼克号","海泽王","海尔兄弟"]
        },
        components: {
          cpn
        }
      });
    </script>

• 注意：在创建模板时，需要将 <template></template> 中写入一个容器，例如<div>标签；
• 在使用驼峰标识时，在模板标签引用中需要使用 “-” 符号将大写字母区隔开，在<template>模板标签中使用组件自定义驼峰标识名称（如下图所示 :c-info 和 :c-message）

    <div id="app">
      <cpn :c-info="info" :c-message="message"></cpn>
    </div>
    <template id="cpn">
      <div>
        <h2>{{ cInfo }}</h2>
        <h2>{{ cMessage }}</h2>
      </div>
    </template>
    <script>
      const cpn = {
        template : "#cpn",
        props: {
          cInfo: {
            Type: Object,
            default(){ return {}}
          },
          cMessage: {
            Type: String,
            default(){ return ""}
          }
        }
      }
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World",
          info: {
            name: "why",
            age: 18,
            height: 1.88
          }
        },
        components: {
          cpn
        }
      });
    </script>