子组件里使用父组件里的数据

子组件里使用父组件里的数据

1. 明确父子组件：ShopGoods.vue为父组件；CartControl.vue为子组件。

2. 目的：在父组件里有来自数据库的food,想要在子组件中使用food中的数据。

3. 复习一下子组件的创建以及在父组件中的使用：

   1. 创建子组件（eg. CartControl.vue）

   2. 在父组件里import子组件：

import CartControl from '../../../components/CartControl/CartControl.vue'

   3. 在父组件的component中映射子组件：

 components: {
    CartControl,
  },

   4. 使用子组件（:food="food" 自定义绑定）

<cartControl :food="food"></cartControl>

4. 在子组件的props里：

props: {
    food: Object,
  },

5. 在子组件中使用food中数据

 <span class="cart-count" >{{ food.count }}</span>

food.count里的count就是food的对象值之一。