1.Vue父組件傳遞數據給子組件

父組件傳遞數據給子組件

父組件數據如何傳遞給子組件呢？能夠經過props屬性來實現,例子以下
父組件：

<template>
  <parent>
      <child :child-msg='msg'></child> //注意其中childmsg需分開寫出來child-msg
  </parent>    
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: 'Hello'    //定一個傳遞的變量msg
      }
    }    
  }
</script>

<style type="text/css">    
</style>

子組件經過props來接收數據:

方式1：

props: ['childMsg']

此處的props中的數值，須要與父組件中使用子組件：child-msg一致,
不然,傳遞不成功

方式2 :

props: {
  childMsg: Array //這樣能夠指定傳入的類型，若是類型不對，會警告
}

檢測props中傳遞的值的類型,不對則會提示警告

方式3：

props: {
  childMsg: {
    type: Array,
      default: [0,0,0] //這樣能夠指定默認的值
  }
}

在props中你可對接收的數值，進行驗證,一樣也能夠設置默認值,
以方便數據的的準確性,這樣呢，就實現了父組件向子組件傳遞數據.