vue父组件访问子组件

Posted 2020-10-20 无花即无果

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>