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)
上一篇 2025年9月15日 下午2:22
下一篇 2025年9月15日 下午3:01


相关推荐

  • 0基础扣子(coze)教程一键生成

    0基础扣子(coze)教程一键生成

    2026年3月13日
    3
  • redis的五种数据类型

    redis的五种数据类型一、百度百科1、简介(1)Redis(RemoteDictionaryServer远程字段服务)是一个开源的使用ANSIC语言编写、支持网络、科技与内存亦可持久化的日志型、key-value数据库,并提供多种语言的API。(2)Redis是一个key-value存储系统,它支持存储的value类型相对更多,包括string、list、set、zset(sortedset–有序集合)和hash。这些数据结构都支持push/pop、add/remove及取交集并集和差集及更丰富的操作,

    2022年6月17日
    21
  • 一篇文章 让你玩转OpenClaw (安装配置篇)

    一篇文章 让你玩转OpenClaw (安装配置篇)

    2026年3月13日
    6
  • java新手代码大全实例,深度解析,值得收藏

    java新手代码大全实例,深度解析,值得收藏策略1——停止挖掘LawofHoles是说当自己进洞就应该停止挖掘。对于单体式应用不可管理时这是最佳建议。换句话说,应该停止让单体式应用继续变大,也就是说当开发新功能时不应该为旧单体应用添加新代码,最佳方法应该是将新功能开发成独立微服务。如下图所示:除了新服务和传统应用,还有两个模块,其一是请求路由器,负责处理入口(http)请求,有点像之前提到的API网关。路由器将新功能请求发送给新开发的服务,而将传统请求还发给单体式应用。另外一个是胶水代码(gluecode),将微服务和单体应用集

    2022年6月21日
    44
  • 从 0 到 1 搭建 AI 代码审查工具:基于 GPT-4.5+GitHub API 实战教程

    从 0 到 1 搭建 AI 代码审查工具:基于 GPT-4.5+GitHub API 实战教程

    2026年3月15日
    2
  • NTP 协议介绍_什么是UTC协议

    NTP 协议介绍_什么是UTC协议NTP协议NTP(NetworkTimeProtocol,网络时间协议)是由RFC1305定义的时间同步协议,用来在分布式时间服务器和客户端之间进行时间同步。NTP基于UDP报文进行传输,使用的UDP端口号为123。使用NTP的目的是对网络内所有具有时钟的设备进行时钟同步,使网络内所有设备的时钟保持一致,从而使设备能够提供基于统一时间的多种应用。对于运行NTP的本地系统,既可以接收来…

    2022年10月12日
    4

发表回复

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

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