<!--父组件访问子组件的方法v-ref:shopcart-->

<template>

    <div id="parent">

        <shopcart v-ref:shopcart></shopcart>

    </div>

</template>

<script>

   export default {

      methods:{

         _drop(target) {

        　　// 体验优化,异步执行下落动画

        　　this.$nextTick(() => {

        　　//this.$refs.shopcart访问子组件（target是子组件中传过来的当前操作的元素对象）

         　　 this.$refs.shopcart.drop(target);

        　});

        },

      }

    }

</script>

<template>

    <div class="child">
　　　　<div class="ball-container">
　　　　　　
　　　　　　<div transition="drop" v-for="ball in balls" v-show="ball.show" class="ball">

　　　　　　　　　<div class="inner inner-hook"></div>
　　　　　　　</div>
　　　　　</div>

　　 <div>

</template>

<script>

export default {

    methods:{

       drop(el) {

          //点击加的时候会遍历拿到show为true的小球

        for (let i = 0; i < this.balls.length; i++) {

          let ball = this.balls[i];

          if (!ball.show) {//所有的ball小球里面找到一个影藏的小球，设置为true

            ball.show = true;

            ball.el = el;

            this.dropBalls.push(ball);//添加到已经下落的小球数组中

            return;

          }

        }

      },

    }

}

</script>