vue學習總結--父子組件的通信(父傳子)

1.簡單描述

在開發中往往需要數據從上層傳遞到下層，這就是父子組件的作用

如何進行父子組件的通信呢？vue官方給出

• 通過props屬性向子組件傳遞數據
• 通過事件向父組件發送消息
  

2.props屬性的基本用法

首先props是一種屬性，和data,methods一樣，數組裏面放上要引用的變量名

  //父傳子:props
  const cpn={
    template:'cpn',
    props:[],  //************看這裏***************
    data (){
      return{}
 },
    methods:{ }
  }

props的值有兩種方式：
方式一：字符串數組。數組中的字符串就是傳遞時的名稱
方式二：對象。對象可以設置傳遞時的類型，也可以設置默認值等

2.1 字符串數組用法（不常用）

看一下具體代碼：

  //根組件
  const app=new Vue({
    el:'#app',
    data:{
      message:'你好',
      movies:['海王','海賊王','海爾兄弟']
    },
    components:{
      cpn
    }
  })

  //子組件，父傳子方式:props
  const cpn={
    template:'#cpn',
    props:['cmovies','cmessage'],
    data (){
        return{}
  },
    methods:{
    }
  }

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

<template id="cpn">
  <div>
    <p>{{cmovies}}</p>
    <h2>{{cmessage}}</h2>
  </div>
</template>

運行結果：

2.2 對象用法（常用）

只需要修改以下代碼;

  //父傳子:props
  const cpn={
    template:'#cpn',
    // 數組寫法  props:['cmovies','cmessage'],
    props:{
      cmessage:{
          type: Array,	//限制類型
          default: 'aaa',		//添加默認值，默認值是隻有沒傳數據時纔會顯示
          required:true		//該屬性表示cmessage爲必傳屬性
      },
   //類型是對象或數組時，默認值必須是一個函數
      cmovies:{
        type:String,
        default(){
            return []
        }
      }
    }
  }

<div id="app">
  <cpn :cmovies="movies"></cpn>
</div>

運行結果：