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中你可对接收的数值，进行验证,一样也能够设置默认值,
以方便数据的的准确性,这样呢，就实现了父组件向子组件传递数据.