以一个商品列表为例,将每一项商品抽离出一个子组件,实践父子组件的传值
父组件为商品列表页面
子组件为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中接受传递的值
简单效果图