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

    原文作者:ALEX
    原文地址: https://segmentfault.com/a/1190000013863554
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞