父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

子组件中有一个说的方法 在父组件中去调用
当你点击的时候 去调用子组件中的方法

fu.vue
在父组件的方法中调用子组件的方法,
很重要 this.$refs.mychild.parentHandleclick();

{
    <template>
    <div>
        <button @click="clickParent">点击 调用子组件</button>
        <child ref="mychild"></child>
    </div>
    </template>

    <script>
    import Child from "../zi/zi";
    export default {
    components: {
        child: Child  //key:value key是组件名称  value是被引入时的名称
    },
    methods: {
        clickParent() {
        this.$refs.mychild.parentHandleclick();
        }
    }
    };
    </script>

}

zi.vue

{
    <template>
      <div ref="col">child</div>
    </template>

    <script>
        export default {
            methods: {
                parentHandleclick(e) {
                console.log("我是子组件在说")
                }
            }
        };
    </script>
}

原文地址:https://www.cnblogs.com/IwishIcould/p/11306344.html

时间: 2024-07-29 05:21:19

父组件调用子组件中的方法- this.$refs.xxx.子组件方法();的相关文章

iframe子页面js调用父页面js函数/父页面调用Iframe子页面中js方法

1.假设当前页面为a.html, iframe的src页面为b.html,其代码如下: 1 <span class="tag"><html> 2 <br></span><span class="tag"><head> 3 <br></span><span class="tag"><title></span><s

Android 子Activity组件在进程内的启动过程 &amp;&amp; 子Activity组件在新进程中的启动过程

1.子Activity组件在进程内的启动过程 在Android Activity组件的启动过程http://blog.csdn.net/jltxgcy/article/details/35984557一文中,我们已经详细分析了Activity的启动过程,对于子Activity组件在进程内的启动过程,我们只分析它们之间的不同. 主要是2处,1是不需要创建新的任务栈,2是不需要创建新进程和子线程. 第1点,体现在如下代码上: -/Android/frameworks/base/services/ja

Delphi7从子线程中发送消息到主线程触发事件执行

[转载]Delphi7从子线程中发送消息到主线程触发事件执行 在对数据库的操作时,有时要用一个子线程来进行后台的数据操作.比如说数据备份,转档什么的.在主窗口还能同是进行其它操作.而有时后台每处理一个数据文件,要向主窗口发送消息,让主窗口实时显示处理进度在窗口上(可视),同时进行日志处理等.我用的是下面的方法: [1]用到的API函数: RegisterWindowsMessage ---------------------- 函数功能:该函数定义一个新的窗口消息,该消息确保在系统中是唯一的.返

[转]MFC子线程中更新控件内容的两种办法

一.概述 每个系统中都有线程(至少都有一个主线程),而线程最重要的作用就是并行处理,提高软件的并发率.针对界面来说,还能提高界面的响应能力.一般的,为了应用的稳定性,在数据处理等耗时操作会单独在一个线程中运行,而所有与主UI线程有关的控件数据刷新应该到主UI线程中处理.也就是数据处理线程发消息,让界面UI去更新控件.在MFC中线程分为界面线程和工作者线程,界面实际就是一个线程画出来的东西,这个线程维护一个"消息队列","消息队列"也是界面线程和工作者线程的最大区别,

Java 继承之子父类中的成员变量和函数

成员变量: 先看这样一段代码: //父类. class Fu { int num = 3; } class Zi extends Fu { int num = 4; void show() { System.out.println("num = "+this.num); } } class ExtendsDemo { public static void main(String[] args) { Zi z = new Zi(); z.show(); } } 从一张图来看它的原理: 图

如何调用phpcms v9中的广告中的具体数据

phpcms v9的广告模块具有很大的灵活性,使用默认的那些模板已经可以得到一些很实用的广告效果,但是如果是自制的类似jQuery切换广告之类的情况,系统自带的调用方法就无法满足要求了,那么这种时候就需要调用广告中的具体数据,如:直接调用图片列表中的图片地址和链接.其实方法很简单,当广告数据表为默认时,调用代码: {pc:get sql="SELECT setting FROM v9_poster WHERE spaceid = 12 AND type='images' AND disabled

angular 中父组件调用子组件的方法

angular中 父组件调用子组件的方法 -- 使用 @ViewChild 装饰器修饰子组件,获取方法,调用 除此之外 ViewChild 还可以获取 DOM ,操作 DOM , 详见: https://www.cnblogs.com/monkey-K/p/11567098.html 1. html 中使用 #var 方式标记 子组件 <div style="border: 1px solid red"> <p>子组件:</p>> <ap

子组件中定义的方法如何传给父组件调用了呢?

//Food组件(是一个一般组件,就是弹出来那个食物的图片) 父组件中调用子组件对象的方法: 1.要得到子组件对象 通过给子组件 指定ref="Food" 2.在子组件中定义自己的方法: 3.在需要调用的地方: 父向子传递使用props 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11740968.html

Vue父组件调用子组件的方法

vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/componen