码迷,mamicode.com
首页 > 其他好文 > 详细

vue父组件访问子组件

时间:2018-01-11 20:38:21      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:ext   组件   nta   cart   round   对象   this   tran   --   

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>

 

vue父组件访问子组件

标签:ext   组件   nta   cart   round   对象   this   tran   --   

原文地址:https://www.cnblogs.com/xuxiaoxia/p/8270122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!