vue子组件传值给父组件_子组件调用父组件中的方法

vue子组件传值给父组件_子组件调用父组件中的方法参考视频:https://www.bilibili.com/video/av32790541/?spm_id_from=trigger_reload原理:在父组件引用子组件时,通过事件绑定机制把一个方法aaaa的引用传给子组件,这个方法中可以有各种参数,子组件在触发自己的函数或者某些数据发生变化时,触发:事件绑定机制绑定的函数,通过参数的方式将要传的值传过来,父组件中处理,也就接到了子…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

参考视频 : https://www.bilibili.com/video/av32790541/?spm_id_from=trigger_reload

原理:

在父组件引用子组件时,通过事件绑定机制把一个方法aaaa的引用传给子组件,这个方法中可以有各种参数,子组件在触发自己的函数或者某些数据发生变化时,触发:事件绑定机制绑定的函数,通过参数的方式将要传的值传过来,父组件中处理,也就接到了子组件的值

 

最开始父组件本身有一个方法 : fatherMethods

fatherMethods(){
    console.log('父组件的方法')    
}

vue子组件传值给父组件_子组件调用父组件中的方法

 

步骤①:在子组件被调用的标签中,绑定一个父组件方法的引用

父组件通过事件绑定机制,也就是 

@sendSon="fatherMethods"

 方式传值给子组件, 注意,这里是方法的引用,换句话就是把这个方法传递给子组件,而不是方法执行完以后的值,所以这里不能加括号 

目的:把父组件的一个方法传给子组件

vue子组件传值给父组件_子组件调用父组件中的方法

 

步骤② 给子组件写一个引发事件

子组件中写一个事件会触发一个子组件本身的方法

@click="sonEdit()"
@change="sonEdit()"
@mouseover="sonEdit()"

vue子组件传值给父组件_子组件调用父组件中的方法

 步骤③  子组件触发这个引发事件

子组件本身的方法sonEdit,其中通过$emit操作父组件传过来的sendSon方法绑定的父组件的方法引用fatherMethods,这时就触发了父组件的方法

换句话说:子组件通过$emit出发了从父组件传过来的方法

sonEdit(){
    this.$emit('sendSon')
    }

vue子组件传值给父组件_子组件调用父组件中的方法

 步骤④  子组件在调用父组件时,传参数

真正的父组件中并没有调用这个show方法,只有传给的子组件中调用了,调用就可以传参数,那么就在子组件中触发时候传参数

vue子组件传值给父组件_子组件调用父组件中的方法

步骤⑤  在调用的时候传参数

$emit在触发父组件传过来的值的时候,第一个参数是方法名,从第二个起,后面均可以传参数,

vue子组件传值给父组件_子组件调用父组件中的方法

show方法里面可以写的是对参数的一系列操作,也就变相完成了从子组件向父组件传值的需求

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/197024.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • tomcat日志乱码怎么解决_linux日志中文乱码

    tomcat日志乱码怎么解决_linux日志中文乱码中文乱码大家在Windows启动Tomcat应该都会遇到中文乱码,其实也不影响使用,但是笔者看着这个乱码难受,于是提供一种较简单的解决方案。解决方案将Tomcat安装目录下/conf/logging.properties中的控制台日志编码由默认的UTF-8改为GBK即可。扩展乱码原因:Windows的控制台默认使用GB2312字符集,而Tomcat控制台日志输出默认使用UTF-8字符集,于是产生中文乱码,可使用chcp命令暂时修改控制台字符集

    2022年9月26日
    0
  • 玩转Redis-京东签到领京豆如何实现

    玩转Redis-京东签到领京豆如何实现-京东签到日历的产品逻辑是怎样的?-传统关系型数据库该如何实现?-表设计初级玩法(**80%的人只会这么玩**)-表设计进阶玩法(**高级程序员才会的玩法**)-查询签到情况及签到的技术实现-基于Redis的Bitmaps实现签到日历(**瞬间提升档次**)-什么是Bitmaps-Bitmaps如何使用(含详细命令对比分析及示例)-BitMap实战签到日历-业务总结/技术总结

    2022年9月18日
    0
  • lldp 命令「建议收藏」

    lldp 命令「建议收藏」LLDP协议介绍:简单说来,LLDP是一种邻近发现协议。它为以太网网络设备,如交换机、路由器和无线局域网接入点定义了一种标准的方法,使其可以向网络中其他节点公告自身的存在,并保存各个邻近设备的发现信息。例如设备配置和设备识别等详细信息都可以用该协议进行公告。具体来说,LLDP定义了一个通用公告信息集、一个传输公告的协议和一种用来存储所收到的公告信息的方法。要公告自身信息的设备…

    2022年5月28日
    66
  • 单调队列优化的背包问题[通俗易懂]

    单调队列优化的背包问题[通俗易懂]对于背包问题,经典的背包九讲已经讲的很明白了,本来就不打算写这方面问题了。但是吧。我发现,那个最出名的九讲竟然没写队列优化的背包。。。。那我必须写一下咯嘿嘿,这么好的思想。我们回顾一下背包问题吧。01背包问题题目有N件物品和一个容量为V的背包。第i件物品的费用是c[i],价值是w[i]。求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总…

    2022年6月25日
    21
  • android listview 滑动卡顿问题解决

    android listview 滑动卡顿问题解决之前在使用listview进行每次通知一来,根据判断是否有这个标志,就更新listview所绑定的数据源,通知更新priceAd.notifyDataSetChanged();,也用了网上的建议使用viewHolder进行listview的item复用机制,但还是会出现卡顿的现象,经过分析,原来是listview的item布局嵌套太多,导致刷新的时候,重绘过多,造成卡顿的现象,以下是另一片博客的分

    2022年7月22日
    8
  • pycharm2020.2永久激活码_pycharm激活账号和密码

    pycharm2020.2永久激活码_pycharm激活账号和密码使用方法:使用自己学校的学校邮箱即可或者获取一个:http://t.cn/E9HAnz3

    2022年8月26日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号