1、父组件(父组件访问子组件的方法drop)
<!--父组件访问子组件的方法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>
2、子组件
<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>