Vue父组件如何调用子组件的方法

  • Post author:
  • Post category:vue


对文章

Vue.js 父子组件通信的十种方式

做一个补充:在父子组件通信中,父组件如何调用定义在子组件的方法

1、父组件文件,使用子组件时,声明ref属性:

<v-header ref="header"></v-header>

2、父组件函数中,用this.$refs调子组件的数据或方法:如:

this.$refs.header.属性名
this.$refs.header.方法名

但要注意:ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。(可以在控制台打印出来看看)

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。


所以重点来了

,如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的。

原因就是:引用指向的是子组件创建的实例,可以理解为绑在了DOM结构上

那如果我偏偏想调用的是这个子组件(弹出框)中的方法,但又不想要弹出框显示,怎么办呢?

解决方法:把v-if换成v-show,这样DOM元素会一直存在于父组件中,子组件的方法也就能调用了

3、子组件调用父组件属性和方法

this.$parent.属性名
this.$parent.方法名



版权声明:本文为wy6250000原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。