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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • fonttools 使用教程[通俗易懂]

    fonttools 使用教程[通俗易懂]2019独角兽企业重金招聘Python工程师标准>>>…

  • runnable 和 callable区别「建议收藏」

    runnable和callable有什么区别?相同点:1、两者都是接口;(废话)2、两者都可用来编写多线程程序;3、两者都需要调用Thread.start()启动线程;不同点:1、两者最大的不同点是:Runnable接口run方法无返回值;Callable接口call方法有返回值。2、Runnable接口run方法只能抛出运行时异常,且无法捕获处理;Callable接口call方法允许抛出异常,可以获取异常信息。注意:Callalbe接口支持返回执行结果,需要调

  • Kali Linux安装pip

    https://pip.pypa.io/en/stable/installing/

  • rownumber实现分页的方法

    rownumber实现分页的方法利用rownumer实现分页的两种常用方式:1)利用betweendeclare@pagesizeintset@pagesize=4declare@pageindexintset@pageindex=3 select *from(s

  • linux platform driver register

    linux platform driver registerPlatformDevicesandDrivers~~~~~~~~~~~~~~~~~~~~~~~~~~~~Seeforthedrivermodelinterfacetotheplatformbus: platform_device,andplatform_driver. Thispseudo-busisusedtoconnectdevice

  • Redis如何启动_电脑一直卡在配置更新100%

    Redis如何启动_电脑一直卡在配置更新100%Redis的配置、启动、操作和关闭一.启动Redis1.默认配置启动执行redis-server命令,按照默认的redis.conf配置文件中的配置启动Redis,如下:因为默认配置无法自定义配置。所以该方式不会再生产环境中使用2.运行配置启动在命令redis-server后加上要修改的配置名和值(可以设置多对),没有设置的………

发表回复

您的电子邮箱地址不会被公开。

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