vue外卖十八：商家详情-食物详情：用ref获取食物详情组件的方法来显示/隐藏子组件、props向子组件传当前食物对象用于显示、@click.stop阻止外层元素的点击事件，让当前点击事件始终有效

本文主要是介绍vue外卖十八：商家详情-食物详情：用ref获取食物详情组件的方法来显示/隐藏子组件、props向子组件传当前食物对象用于显示、@click.stop阻止外层元素的点击事件，让当前点击事件始终有效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1）编写显示隐藏当前组件显示/隐藏方法

<template>
<!-- v-if显示隐藏当前组件--><div class="food" v-if="isShow">methods: {toggleShow () {this.isShow = !this.isShow}},

2）结合ref调用子组件的显示隐藏方法src/pages/shops/goods/goods.vue

知识点：
1.ref标示子组件：<Food :food='food' ref="food" />
2.调用子组件的内部方法：this.$refs.food.fn()

<!-- 【1】@click点击食物列表调用显示隐藏函数把当前food对象传到函数中 -->
<li class="food-item bottom-border-1px" v-for="(food,k2) in good.foods" :key=k2 
@click="showFood(food)"><!-- 【2】重点1：ref是标识此子组件：方便调用其内部的toggleShow()展示隐藏食物详情 
【2.2】:food 向子组件传当前food对象用于显示-->
<Food :food='food' ref="food" />data(){return{//【3】显示食物详情的当前食物对象food:{},}
},
methods:{//【4】点击展示商品详情showFood(food){this.food=food //把当前食物对象赋值给data中food//【5】重点2：通过ref快速调用子组件的显示隐藏函数this.$refs.food.toggleShow()}},

3）子组件接收父组件传过来要显示的food对象（完整逻辑）

<template>
<!--显示或隐藏当前组件--><div class="food" v-if="isShow"><div class="food-content"><div class="image-header"><img v-lazy="food.image"><p class="foodpanel-desc">{{food.info}}</p><!-- 点关闭时隐藏当前组件 --><div class="back" @click="toggleShow"><i class="iconfont icon-arrow_left"></i></div></div><div class="content"><h1 class="title">{{food.name}}</h1><div class="detail"><span class="sell-count">月售 {{food.sellCount}} 份</span><span class="rating">好评率 {{food.rating}}%</span></div><div class="price"><span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span></div><div class="cartcontrol-wrapper"><!-- 【4】使用购物车组件，交向其传当前food对象用于向其中添加count属性，以添加或减少要买的食物数量--><CartControl :food="food" /></div></div></div><!-- 点黑色蒙版部分也要隐藏当前组件 --><div class="food-cover" @click="toggleShow"></div></div>
</template><script>
//【2】引用购物车组件import CartControl from '../CartControl/CartControl.vue'export default {props: {//【1】接收父传过来的foodfood: Object},data () {return {//控制当前组件显示或隐藏的数据isShow: false}},methods: {//显示隐藏当前组件toggleShow () {this.isShow = !this.isShow}},components: {//【3】注册购物车组件CartControl}}
</script>

效果：点击食物列表显示对应详情弹窗

在这里插入图片描述

4）bug修复：点列表的加减号时也会显示食物详情 components/cartControl/cartControl.vue

到对应控制子组件在点击事件加个@click.stop=…阻止上面的点击事件即可

 <div class="iconfont icon-remove_circle_outline" v-show="food.count" @click.stop="updateCount(false)"></div><!-- 点击并传值到计算属性，参数含义：true表示加count --><div class="iconfont icon-add_circle" @click.stop="updateCount(true)"></div>

效果：再点列表的加减号即可正常加减数量不会再弹出食物详情弹窗了

附件：静态食物详情组件src/components/food/food.vue

<template><div class="food"><div class="food-content"><div class="image-header"><imgsrc="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"><p class="foodpanel-desc">主、辅料:水、大米、南瓜、冰糖等</p><div class="back"><i class="iconfont icon-arrow_left"></i></div></div><div class="content"><h1 class="title">南瓜粥</h1><div class="detail"><span class="sell-count">月售 91 份</span><span class="rating">好评率 100%</span></div><div class="price"><span class="now">￥9</span><span class="old" style="display: none;">￥</span></div><div class="cartcontrol-wrapper"><CartControl/></div></div></div><div class="food-cover"></div></div>
</template><script>export default {}
</script><style lang="stylus" rel="stylesheet/stylus" scoped>@import "../../common/stylus/mixins.styl".foodposition: fixedleft: 0top: 0bottom: 48pxz-index: 101width: 100%&.fade-enter-active, &.fade-leave-activetransition opacity .5s&.fade-enter, &.fade-leave-toopacity 0.food-contentposition absoluteleft 50%top 50%transform translate(-50%, -50%)width 80%height 65%z-index 66background #fffborder-radius 5px.image-headerposition: relativewidth: 100%height: 0padding-top: 100%imgposition: absolutetop: 0left: 0width: 100%height: 100%.foodpanel-descfont-size 10pxcolor #dddletter-spacing 0position absolutebottom 0left 0right 0padding 0 10px 10px.backposition: absolutetop: 10pxleft: 0.icon-arrow_leftdisplay: blockpadding: 10pxfont-size: 20pxcolor: #fff.contentposition: relativepadding: 18px.titleline-height: 14pxmargin-bottom: 8pxfont-size: 14pxfont-weight: 700color: rgb(7, 17, 27).detailmargin-bottom: 18pxline-height: 10pxheight: 10pxfont-size: 0.sell-count, .ratingfont-size: 10pxcolor: rgb(147, 153, 159).sell-countmargin-right: 12px.pricefont-weight: 700line-height: 24px.nowmargin-right: 8pxfont-size: 14pxcolor: rgb(240, 20, 20).oldtext-decoration: line-throughfont-size: 10pxcolor: rgb(147, 153, 159).cartcontrol-wrapperposition: absoluteright: 12pxbottom: 12px.buyposition: absoluteright: 18pxbottom: 18pxz-index: 10height: 24pxline-height: 24pxpadding: 0 12pxbox-sizing: border-boxborder-radius: 12pxfont-size: 10pxcolor: #fffbackground: rgb(0, 160, 220)&.fade-transitiontransition: all 0.2sopacity: 1&.fade-enter, &.fade-leaveopacity: 0.food-coverposition absolutetop 0right 0bottom -48pxleft 0z-index 55background-color rgba(0, 0, 0, 0.5)</style>

附件：goods完整代码

<template><div><div class="goods"><div class="menu-wrapper" ref="menuWrapper"><ul><li class="menu-item" v-for="(v,k) in goods" :key=k :class="{current:k===currentIndex}" @click="clickMenuItem(k)"><span class="text bottom-border-1px"><img class="icon":src="v.icon" v-if="v.icon">{{v.name}}</span></li></ul></div><div class="foods-wrapper" ref="foodsWrapper"><ul ref='topUi'><li class="food-list-hook" v-for="(good,k) in goods" :key=k><h1 class="title">{{good.name}}</h1><ul><li class="food-item bottom-border-1px" v-for="(food,k2) in good.foods" :key=k2 @click="showFood(food)"><div class="icon" ><img width="57" height="57":src="food.icon"></div><div class="content"><h2 class="name">{{food.name}}</h2><p class="desc">{{food.description}}</p><div class="extra"><span class="count">月售 {{food.sellCount}} 份</span><span>好评率 {{food.rating}}% </span></div><div class="price"><span class="now">￥{{food.price}}</span><span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span></div><div class="cartcontrol-wrapper"><!--使用并传food到cartcontrol子组件引号内，是当前页面的值；冒号后，是子组件接收的名--><CartControl :food='food' /></div></div></li></ul></li>            </ul></div></div><!-- ref是标识此子组件：用于调用其内部的toggleShow()展示隐藏食物详情;:food向子组件传当前food对象 --><Food :food='food' ref="food" /></div>
</template><script>import {mapState} from 'vuex'import BScroll from '@better-scroll/core'import CartControl from '../../../components/CartControl/CartControl'import Food from '../../../components/Food/food.vue'export default{data(){return{scrollY:0, //右侧食物列表的滑动实时坐标（实时变动）tops:[], //左侧食物分类的for的index值组成的数组（生成后就固定了）food:{},}},mounted(){this.$store.dispatch('getShopGoods',()=>{//数据更新后执行this.$nextTick(()=>{//列表显示之后创建：this._initY() //调用滑动左右侧列表，并收集Y位移this._initTop() //收集li的值})})},computed:{...mapState(['goods']),//计算得到当前位移scrollY，所处分类top在tops中的下标currentIndex(){// 取得top0当前位移scrollY，和各食物分类top(n)组成的数组tops[]const {scrollY,tops}=this/* 用findIndex(参数1:当前计算的top值,参数2:当前top的下标)返回*  符合要求的下标*/const index=tops.findIndex((top,index)=>{// 返回下标满足的条件：scrollY>=top,且<下一个topreturn scrollY>=top && scrollY< tops[index+1]})// 返回符合的下标（即当前scrollY位移所处的top在tops中对应的下标）console.log('index:'+index)return index}},methods:{//收集滑动食物列表时，列表顶点相对于原位置，在Y轴位移的实时数值_initY(){//新建一个滚动对象：第一个参数是类选择器，第二个参数：配置项new BScroll('.menu-wrapper',{})this.foodsScroll=new BScroll('.foods-wrapper',{probeType:2 //滑动触发具体条件，惯性滑动不记录：文档>配置项>probeType})/*给食物列表绑定滚动监听:以收集滚动y移位*参数：scroll:文档api的事件的scroll：文档>api>事件>scroll*/this.foodsScroll.on('scroll',({x,y})=>{// console.log(x,y)this.scrollY=Math.abs(y)console.log('scrollY:'+this.scrollY)})//【2】只收集惯性滚动结束时的y值// 给右侧列表绑定scroll结束的监听this.foodsScroll.on('scrollEnd', ({x, y}) => {console.log('scrollEnd', x, y)this.scrollY = Math.abs(y)})},//收集每个食物分类列表，相对于顶点食物分类列表，的距离，成一个数组_initTop(){const tops=[]let top=0tops.push(top)/*结合ul的标识ref=topui,找到所有类名为food-list-hook的元素即*li对象组成的多层对象(此对象含lenght属性)*li内部有一个叫clientHeight记录此li的高度*/const lis=this.$refs.topUi.getElementsByClassName('food-list-hook')// console.log(lis) //打印一下收集到的li们对象组成的数组// console.log(typeof(lis)) //看看其类型// 把lis转换成一个数组，然后逐个读取其高度，并累加计算出每个li的顶部位置传入tops里// Array.prototype.slice.call用法详见：Array.prototype.slice.call(lis).forEach(li=>{// console.log(li)top+=li.clientHeighttops.push(top)})this.tops=topsconsole.log(tops)},//点击左侧分类时自动滚动clickMenuItem(index) {// console.log(index)// 使用右侧列表滑动到对应的位置// 得到目标位置的scrollYconst scrollY = this.tops[index]// 立即更新scrollY(让点击的分类项成为当前分类)this.scrollY = scrollY// 平滑滑动右侧列表this.foodsScroll.scrollTo(0, -scrollY, 300)},//点击展示商品详情showFood(food){this.food=foodthis.$refs.food.toggleShow()}},components:{CartControl,Food,}}
</script><style lang="stylus" rel="stylesheet/stylus">@import "../../../common/stylus/mixins.styl".goodsdisplay: flexposition: absolutetop: 195pxbottom: 46pxwidth: 100%background: #fff;overflow: hidden.menu-wrapperflex: 0 0 80pxwidth: 80pxbackground: #f3f5f7.menu-itemdisplay: tableheight: 54pxwidth: 56pxpadding: 0 12pxline-height: 14px&.currentposition: relativez-index: 10margin-top: -1pxbackground: #fffcolor: $greenfont-weight: 700.textborder-none().icondisplay: inline-blockvertical-align: topwidth: 12pxheight: 12pxmargin-right: 2pxbackground-size: 12px 12pxbackground-repeat: no-repeat.textdisplay: table-cellwidth: 56pxvertical-align: middlebottom-border-1px(rgba(7, 17, 27, 0.1))font-size: 12px.foods-wrapperflex: 1.titlepadding-left: 14pxheight: 26pxline-height: 26pxborder-left: 2px solid #d9dde1font-size: 12pxcolor: rgb(147, 153, 159)background: #f3f5f7.food-itemdisplay: flexmargin: 18pxpadding-bottom: 18pxbottom-border-1px(rgba(7, 17, 27, 0.1))&:last-childborder-none()margin-bottom: 0.iconflex: 0 0 57pxmargin-right: 10px.contentflex: 1.namemargin: 2px 0 8px 0height: 14pxline-height: 14pxfont-size: 14pxcolor: rgb(7, 17, 27).desc, .extraline-height: 10pxfont-size: 10pxcolor: rgb(147, 153, 159).descline-height: 12pxmargin-bottom: 8px.extra.countmargin-right: 12px.pricefont-weight: 700line-height: 24px.nowmargin-right: 8pxfont-size: 14pxcolor: rgb(240, 20, 20).oldtext-decoration: line-throughfont-size: 10pxcolor: rgb(147, 153, 159).cartcontrol-wrapperposition: absoluteright: 0bottom: 12px
</style>