博客

对文章

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.方法名