vue父子组件传值实践

以一个商品列表为例，将每一项商品抽离出一个子组件，实践父子组件的传值
父组件为商品列表页面
子组件为goodItem

常见情况一 子组件接收父组件的值

（示例为父组件获取到对应的商品列表data后传值给商品列表子组件进行渲染）
Step1、新建子组件

子组件需要从父组件接收到列表data,不在data里进行声明，直接在props中进行传递，命名为goodList

Step2、父组件引入子组件

1、通过import 引入组件
2、在coponents中声明子组件
3、在页面引入，大写字母将被拆分成 -
4、在组件上通过属性传递 :子组件中定义的参数 = “本地定义的dataList” 的形式接收子组件的传递的参数名，赋值给本地data，将自动更新给子组件

常见情况二 子组件传值给父组件

（示例为点击每一项的购物车时，将id传回给父组件）

Step1、子组件传值给父组件

1、新建点击事件
2、在methods中定义点击事件；
3、通过this.$emit(‘自定义参数名’，传递的值) 的方式向父组件传递

Step2、父组件接收

1、在引入的子组件上定义一个方法，使用子组件点击传递时定义的参数名
2、在method中接受传递的值

简单效果图