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

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


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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 双目测距理论及其python实现

    双目测距理论及其python实现一、双目测距基本流程双目测距属于双目SLAM的一个应用领域。关于双目测距的基本原理,其实并不复杂,但说起来内容也不少,其核心原理就是三角测量,三角测量在土地测量、天文测量等领域都得到了广泛应用,是一种很好的测距方法。为了对双目测距的内容有一个很好的认识大家可以先看一下这个博客,讲的挺的不错的:https://blog.csdn.net/piaoxuezhong/article…

    2022年7月15日
  • 怎么新建pytest的ini文件_pytest.ini配置

    怎么新建pytest的ini文件_pytest.ini配置前言pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行查看pytest.ini的配置选项pytest-h找到以下

    2022年7月30日
  • 线程池参数到底要怎么配?这可能是最好的答案[通俗易懂]

    线程池参数到底要怎么配?这可能是最好的答案[通俗易懂]文章目录1线程池快速回顾2现有设置参数的方法及不足3如何设置核心线程数(corePoolSize)4如何设置最大线程数(maxPoolSize)5如何改变等待队列长度????Java学习:Java从入门到精通总结????Spring系列推荐:Spring源码解析????最近更新:2022年1月8日????个人简介:通信工程本硕????、阿里新晋猿同学????。我的故事充满机遇、挑战与翻盘,欢迎关注作者来共饮一杯鸡汤????点赞????收藏⭐留言????都是我

    2022年5月3日
  • 教你搭建一套自己的SVN服务器

    教你搭建一套自己的SVN服务器想不想自己搭建一套SVN服务器?来吧!Followme!

    2022年7月19日
  • SQL语句大全实例

    SQL语句实例 表操作  例1 对于表的教学管理数据库中的表STUDENTS,可以定义如下:  CREATE TABLE STUDENTS  (SNO     NUMERIC(6,0)NOTNULL  SNAME   CHAR(8)NOTNULL  AGE     NUMERIC(3,0)  SEX

    2022年4月3日
  • LVS:三种负载均衡方式比较+另三种负载均衡方式

    LVS:三种负载均衡方式比较+另三种负载均衡方式

    2021年9月12日

发表回复

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

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