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父组件访问子组件的更多相关文章

  1. iview2.0 父组件访问子组件 方法

    //从父组件中访问子组件 可以给子组件定义标识 通过ref="chead" 定义  通过父组件就可以访问了

  2. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  3. Vue系列之 => 父组件向子组件传值

    父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...

  4. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  6. 【VUE】6.组件通信(一)父组件向子组件传值

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.父组件像子组件通信 props 2.组件通信 1. 新增一个路由入口 /fath ...

  7. vue 父组件传递子组件事件

    在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...

  8. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  9. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

随机推荐

  1. 关于Web服务接口测试的一些问题及答案

    本篇主要是像想要了解并且学习接口测试的朋友,做一个入门的简单介绍 1.什么是接口 答:接口就是内部模块对模块,外部系统对其他服务提供的一种可调用或者连接的能力的标准,就好比usb接口,他是系统向外接提 ...

  2. 使用mysql-proxy 快速实现mysql 集群 读写分离

    目前较为常见的mysql读写分离分为两种: 1. 基于程序代码内部实现:在代码中对select操作分发到从库:其它操作由主库执行:这类方法也是目前生产环境应用最广泛,知名的如DISCUZ X2.优点是 ...

  3. [luoguP1041] 传染病控制(DFS)

    传送门 n <= 300 结果裸的dfs就直接过了.. 枚举每一层,枚举删除每一层的边,然后把删除的边所连接的子树全部删去 代码 #include <vector> #include ...

  4. Python模块:logging、

    logging模块: 很多程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误.警告等信息输出.Python的logging模块提供了标准的日志接口,你可以通过它存储各种格 ...

  5. 【错误解决】 java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINF.classes.views.index_jsp

    转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] 今天建立Spring MVC骨架的时候,突然遇到这么一个问题~~ HTTP Stat ...

  6. Linux下汇编语言学习笔记20 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  7. [bzoj2946][Poi2000]公共串_后缀数组_二分

    公共串 bzoj-2946 Poi-2000 题目大意:给定$n$个字符串,求他们的最长公共子串. 注释:$1\le n\le 5$,$1\le minlen<maxlen\le 2000$. ...

  8. 洛谷——P1036 选数

    题目描述 已知 n 个整数 x1,x2,…,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k=3,4 个整数分别为 3,7,12, ...

  9. 【.Net 学习系列】-- 反射的简单用法

    新建两个项目:类库(Model)和控制台应用程序(ReflectTest). 在[Model]中添加一个类[User]: namespace Model { public class User { p ...

  10. MicroPython实现wifi干扰与抓包

    0×00前言 之前做的WIFI攻击实验都是基于arduino环境开发的,最近想尝试一下使用micropython完成deautch(解除认证)攻击.本次开发板使用的还是TPYBoardv202. 0× ...