1.Vue子组件调用父组件的方法(亲测)

Vue中子组件调用父组件的方法,这里有三种方法提供参考

 
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
父组件
 
<template>
    <div>
        <child></child>
    </div>
</template>
<script>
import child from '~/components/dam/child';
export default {
    components: {
        child
    },
    methods: {
        fatherMethod() {
            console.log('测试');
        }
    }
};
</script>

 

 
子组件
 
<template>
    <div>
        <button @click="childMethod()">点击</button>
    </div>
</template>
<script>
export default {
    methods: {
        childMethod() {
       this.$parent.fatherMethod();
        }
    }
};
</script>

 

 
第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。(推荐)
@fatherMethod="fatherMethod1"
this.$emit('fatherMethod');
父组件
 
<template>
    <div>
        <child @fatherMethod="fatherMethod1"></child>
    </div>
</template>
<script>
import child from '~/components/dam/child';
export default {
    components: {
        child
    },
    methods: {
        fatherMethod1() {
            console.log('测试');
        }
    }
};
</script>

 

 
子组件
 
<template>
    <div>
        <button @click="childMethod()">点击</button>
    </div>
</template>
<script>
export default {
    methods: {
        childMethod() {
            this.$emit('fatherMethod');
        }
    }
};
</script>

 

 
第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法
父组件
 
<template>
    <div>
        <child :fatherMethod="fatherMethod1"></child>
    </div>
</template>
<script>
import child from '~/components/dam/child';
export default {
    components: {
        child
    },
    methods: {
        fatherMethod1() {
            console.log('测试');
        }
    }
};
</script>

 

 
子组件
 
<template>
    <div>
        <button @click="childMethod()">点击</button>
    </div>
</template>
<script>
export default {
    props: {
        fatherMethod: {
            type: Function,
            default: null
        }
    },
    methods: {
        childMethod() {
            if (this.fatherMethod) {
            this.fatherMethod();
            }
        }
    }
};
</script>

 

 
 
三种都可以实现子组件调用父组件的方法,但是效率有所不同,根据实际需求选择合适的方法,嗯,就酱~
 
 

热门文章

暂无图片
编程学习 ·

修改wordpress控制台底部版权信息

有时候给别人做的wordpress网站,不想暴露wordpress这几个字或者需要加上自己的信息。我们可以更改wordpress控制台底部的信息。具体方法:复制下面的代码:放到functions.php里面/* 设定控制台页角版权信息开始 */ function modify_footer_admin () { //底部“左侧”显示的信…
暂无图片
编程学习 ·

eat_pytorch_in_20_days学习笔记(1)图片数据建模流程范例

一、Pytorch的建模流程 1.准备数据(难点。我的数据类型:图片数据) 2.定义模型 3.训练模型 4.评估模型 5.使用模型 6.保存模型 图片数据建模流程范例 1.准备数据 cifar2数据集: cifar10数据集的子集,只包括前两种类别airplane和automobile 训练集: airplane和automobile图片…
暂无图片
编程学习 ·

Mac安装gym

描述 mac系统下安装gym 假设你的电脑已经安装了python环境、pip工具、Anaconda等常见必要的开发工具(为什么这么说,因为我的电脑已经有了很多配置,所以纯净的mac系统去安装gym我没试过) 安装命令 有两种安装方式,都可以。 第一种:很直接 使用这一种安装命令的话,你看不到…
暂无图片
编程学习 ·

《伸手系列》之分布式锁Redssion入门和源码解析

Redisson简介 Javaer都知道Jedis,Jedis是Redis的Java实现的客户端,其API提供了比较全面的Redis命令的支持。Redission也是Redis的客户端,相比于Jedis功能简单。Jedis简单使用阻塞的I/O和redis交互,Redission通过Netty支持非阻塞I/O。Jedis最新版本2.9.0是2016年的快3年了没…
暂无图片
编程学习 ·

销售分析 II

题目描述:Table: Product+--------------+---------+ | Column Name | Type | +--------------+---------+ | product_id | int | | product_name | varchar | | unit_price | int | +--------------+---------+ product_id 是这张表的主键 Table: Sales+----…
暂无图片
编程学习 ·

flume采集多个文件夹日志

在flume1.6版本及之前,如果想要监控多个目录下的多个文件,可以使用Filelistener,在flume1.7之后,增加了TAILDIR,主要是监控文件的变化 参考配置: #配置Agent a1 的组件 a1.sources=r1 a1.sinks=s1 a1.channels=c1#描述/配置a1的source1 a1.sources.r1.type=TAILDIR #偏移量…
暂无图片
编程学习 ·

旋翼机自主着陆-主要技术难点

搜索阶段: 远距离: ​ 目标为几个像素,并且淹没在环境里 ​ 完全没有任何目标或目标偶尔出现,如何进行导航 中远距离 ​ 目标部分容易被遮挡,如何进行目标检测 ​ 在光线条件较差的环境下,目标检测出现误判和无法工作的情况 近距离 ​ 目标在视场中占据较大部分,飞机…
暂无图片
编程学习 ·

CDH Hue连接Hbase报错

问题描述 安装好CDH集群后,在Hue中查看HBase信息时,Hue界面报错如下: Api 错误:TSocket read 0 bytesHue日志报错: exceptions_renderable ERROR Potential trace: [(/opt/cloudera/parcels/CDH-6.3.2-1.cdh6.3.2.p0.1605554/lib/hue/apps/hbase/src/hbase/api.py, 46,…
暂无图片
编程学习 ·

Java工具类-使用RSA验签

1 私钥签名public static String signByKey(String content,String privateKey) {PKCS8EncodedKeySpec sp = new PKCS8EncodedKeySpec(new BASE64Decoder().decodeBuffer(privateKey));KeyFactory keyFactory = KeyFactory.getInstance("RSA");PrivateKey key = keyF…
暂无图片
编程学习 ·

nat表中的dnat snat的使用(iptables)

nat表中的dnat snat的使用- snatiptables -t nat -A POSTROUTING -o enp6s0 -j SNAT --to-source 172.25.254.33- dnatiptables -t nat -A PREROUTING -i enp6s0 -j DNAT --to-dest 170.25.254.22从enp6s0进来的所有数据都转给170.25.254.11,即给enp6s0(172.25.254.33)的所有…
暂无图片
编程学习 ·

Easyui网上书城前端界面

Easyui网上书城前端界面登录界面注册界面首页界面查询书籍界面购物车界面login.htmlregister.htmlindex.htmlsearch.htmlshopping.html 接上一篇博客. 首先,前端界面所需要的界面有 登录 注册 首页 查询书籍 购物车 登录界面注册界面首页界面查询书籍界面购物车界面login.html…
暂无图片
编程学习 ·

2020李宏毅学习笔记——33.Network Compression(2_6)

3.为什么要pruning? 首先有一个问题:既然最后要得到一个小的network,那为什么不直接在数据集上训练小(有local minima的问题)的模型,而是先训练大模型?解释一:模型越大,越容易在数据集上找到一个局部最优解,而小模型比较难训练,有时甚至无法收敛。 解释二:2018年的…
暂无图片
编程学习 ·

KMP算法

KMPKMP主要使用场景场景注意事项结构模板结构模板主体初始化建立前缀表移动处理前缀表循环匹配实现cpp经典问题字符串模式匹配问题描述例题演示实现cpp参考文献 KMP 主要使用场景场景字符串模式匹配注意事项KMP需要输入两个字符串,使用string的时候自带长度,使用纯c的时候请自己…
暂无图片
编程学习 ·

Spring Boot, MySQL, JPA, Hibernate Restful CRUD API Tutorial

Spring Boot MySQL JPA Hibernate Restful CRUD API TutorialSpring Boot has taken Spring framework to the next level. It has drastically reduced the configuration and setup time required for spring projects. Spring Boot将Spring框架提升到了一个新的高度。它大大…
暂无图片
编程学习 ·

linux 修改时间并永久生效

Centos系统,必须同时修改系统时间和硬件时间,才可以保证修改有效,单纯的使用date命令修改系统时间,是立即生效,重启后系统还原。具体操作如下:1.date {查看目前本地的时间}2.hwclock --show {查看硬件的时间}3.如果硬件时间和系统时间不同,那就对硬件的时间进行修改4.hw…
暂无图片
编程学习 ·

小程序全局socket使用 并自定义发送心跳

//app.js App({globalData: {userInfo: nullsocketUrl:"wss:.....",//socketUrl//延迟timeout: 10000,socketHeartTimer: null,//socket连接回调函数callback: function () {},//socket连接定时器socketClientTimer: null,//当前socket是否连接isSocketConnect: fals…
暂无图片
编程学习 ·

mybati中动态标签「if」没有生效的原因

一、问题: <if test="carrier != null and carrier != and carrier !=0">AND CARRIER = #{carrier} </if>我们在接口设置传入的字段类型为String,要在carrier字段不为null,空字符串,和”0“的时候增加以上条件,但是以上当carrier等于"0"时…
暂无图片
编程学习 ·

关于剪贴板的故事—起源于公众号后台的一次探寻

关于剪贴板的故事—起源于公众号后台的一次探寻 整个事情的起源是这样的。 六月底,我打算重新开始更我停了很久的公众号,因为域名到期和图片自动上传不够便利的原因,我弃用了之前的vscode+markdown preview enhanced插件+qiniu-upload-image插件的写文方案。同时,vscode写m…