VUE2.0 父组件传值子组件

本文主要介绍VUE2.0父组件像子组件传值

1.首先父组件要引入子组件，然后通过传值:data=data的形式传参，其中第一个data表示子组件接收的数组名，可以是字符串、布尔值、JSON对象等形式，第二个data则是父组件的对象参数。(data不是唯一，可以自定义，下文案例用food表示)
引入子组件JS关键代码如下：

<script>
    import CartControl from '@/components/CartControl/CartControl';
     export default {
        components: {//注册组件
          CartControl
        }
    }
</script>

DOM截点关键代码如下：

<template>
    <div>
      <cart-control :food="food"></cart-control>
    </div>
<template>

2.子组件接收父组件的参数。通过props{data{type:array}}的是形式接收对象，type后面对应的类型根据实际情况做调整。

<script>
    export default {
        props: {
          food: {
            type: Object
          }
        }
    }
</script> 

Tips：如此这般，你就可以在子组件获取父组件的传值了，相当于你在data() {return {food:[]}}创建了一个food的对象。在DOM截点可以直接使用food，也可以通过this.food来获取对象。
完整案例参考
父组件结构图如下：

子组件结构图如下：

如有疑问，请留言。