vue 父组件调用子组件的方法_vue子组件修改父组件值

vue 父组件调用子组件的方法_vue子组件修改父组件值我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法例:子组件:<template><div></div></template><script>exportdefault{methods:{c

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

Jetbrains全系列IDE稳定放心使用

我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法

例:
子组件:

<template>
  <div></div>
</template>

<script> export default { methods:{ childMethod(flag) { console.log(flag) } }, created(){ } } </script>

父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用

<template>
  <div @click="parentMethod">
    <children ref="child1"></children>
  </div>
</template>

<script> import children from 'components/children/children.vue' export default { data(){ return { flag: true } }, components: { 'children': children }, methods:{ parentMethod() { console.log(this.$refs.child1) //返回的是一个vue对象,所以可以直接调用其方法 this.$refs.child1.childMethod(this.flag); } } } </script>

例子,兄弟组件间传递DOM数据,调用函数

写一个兄弟组件之间传递数据,父组件调用方法的案例:
第一个子组件cartcont,发射数据

this.$emit('cartadd', event.target);

父组件接收数据,并将数据,通过调用另一个子组件shopcart 的方法传递给另一个子组件shopcart

<v-cartcont :food="food" @cartadd='_drop'></v-cartcont>
<v-shopcart ref='shopcart'></v-shopcart>

_drop(target){
    console.log('父组件接收数据')
    this.$refs.shopcart.drop(target);
}

shopcart子组件的方法

drop(el){
    console.log('调用另一个子组件的方法')
    console.log(el)
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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


相关推荐

  • ORA-29491: invalid table for chunking 错误记录[通俗易懂]

    ORA-29491: invalid table for chunking 错误记录[通俗易懂]大家在网上找的oracle这个包dbms_parallel_execute执行大数据量sql语句执行的时候,可能会遇到这个错误。刚开始我也挺困惑,后来发现了这个错误原因,记录下来可能给你帮助。dbms_parallel_execute.create_chunks_by_rowid(task_name=>vc_task,

    2022年11月2日
  • goland激活码_在线激活

    (goland激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/ide…

    2022年3月26日
  • batchnorm原理及代码详解(笔记2)

    batchnorm原理及代码详解(笔记2)Batchnorm原理详解前言:Batchnorm是深度网络中经常用到的加速神经网络训练,加速收敛速度及稳定性的算法,可以说是目前深度网络必不可少的一部分。本文旨在用通俗易懂的语言,对深度学习的常用算法–batchnorm的原理及其代码实现做一个详细的解读。本文主要包括以下几个部分。Batchnorm主要解决的问题 Batchnorm原理解读 Batchnorm的优点 Batc…

    2022年5月28日
  • itextpdf生成表格的常见用法

    itextpdf生成表格的常见用法随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)、博主微信(guyun297890152)、QQ技术交流群(183198395)。在前面的文章介绍了itextpdf基本用法和使用itextpdf生成图片,itextpdf还可以实现很多功能,非常强大,今天主要介绍如何使用itextpdf生成表格式的pdf,在实际项目中也非常常用,首先举一个非常…

    2022年6月14日
  • eclipse配置tomcat安装及配置教程_vbras部署教程

    eclipse配置tomcat安装及配置教程_vbras部署教程想用Tomcat作为服务器,必须分以下两步。首先要配置好JDK的环境变量,再去下载Tomcat的压缩包。下载、安装JDK,并且配置好环境变量1、打开浏览器,输入JDK搜索,根据搜索结果下载安装包安装应用2、先接受协议,再根据自己的电脑下载相应的JDK版本,默认安装就行了。3、配置环境变量。找到安装路径,默认安装的一般都是在这个路径下C:\ProgramFiles\Java\jdk1.8.0_774、然后点击电脑开机键,打开控制面板5、然后点击系统安全,打开进入6、点击系统7、点击“高.

    2022年9月16日
  • JSoup模拟登录新版正方教务系统(内网-教务系统)爬取信息过程详解[通俗易懂]

    JSoup模拟登录新版正方教务系统(内网-教务系统)爬取信息过程详解[通俗易懂]利用JSoup模拟登录校园内网和新版正方教务系统,然后爬取成绩和课表等信息,并展示在APP上。

    2022年6月17日

发表回复

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

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