一、前言                                                                   

二、主要内容                                                            

1、实现效果（其实可以直接在父组件中操作子组件的显示隐藏，但是这里通过在子组件定义自己的显示隐藏效果，让父组件调用，训练一下这种方式）

 

 

2、分析：

　　（1）点击父组件的某一个li项，跳出这个商品详情（子组件项）

       （2）子组件中还是需要接收到父组件中的food,但是这个food不像上一篇那样是固定的，所以这里的这个food是根据我们点击的不同的项，传进去的

       （3）为了实现上一步分析：我们需要在data中定义一个对象，点击的时候，将当前对象的food传进去，然后在传给子组件，这样就能实现动态传递food了

3、具体实现

　　（1）父组件中先引入并且使用子组件

　　（2）在父组件的每一项上添加一个点击事件，并且将当前项的food通过定义的这个函数传给子组件

     
                //省略                                  

　　（3）metods:中定义这个方法接收并传过去

　　（4）在子组件中要定义该组件的显示隐藏方法，先用一个标识来标记

export default {    props: {      food: Object    },    data () {      return {        isShow: false      }    },    methods: {      toggleShow () {        this.isShow = !this.isShow      }    },    components: {      CartControl    }  }

　　（5）父组件中用this.$refs.refname.method()来得到子组件的方法，并且执行

// 显示点击的food      showFood (food) {        // 设置food        this.food = food        // 显示food组件 (在父组件中调用子组件对象的方法)        this.$refs.food.toggleShow()      }

 

4、完整代码：

父组件：

子组件：

 

 

 

三、总结