vue中的使用$refs父组件访问子组件的数据和方法在vue项目里经常用父组件要调用子组件的方法，此时就可以通过ref属

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情

在vue项目里经常用父组件要调用子组件的方法，此时就可以通过ref属性实现。

ref 添加在普通的标签上

ref可以替代id属性，用this.$refs.xx 获取到的是dom元素。

添加在组件标签上

获取到的是组件实例。可以访问组件的数据和方法。借此可以实现子组件传值给父组件。父组件可以访问子组件的数据和方法。

使用$refs父组件访问子组件的数据和方法

使用时给子组件标签定义一个ref名，父组件通过this. $refs.xxx，获取子组件实例。this.$ refs.xxx.方法名可以直接调用子组件方法。

<ChildrenDemo ref="childrenDemo"></ChildrenDemo>
<button @click="getChildData">点击获取子组件数据</button>

父组件方法里调用子组件方法

getChildData: function () {
  let child = this.$refs.childrenDemo//获取子组件实例
  console.log(child.value);//访问子组件属性
  child.childFn() //调用子组件的childFn()方法
},

注意：

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——我们应该避免在模板或计算属性中访问$ refs。

由于ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

子组件方法

edit(node) {
  this.isAdd = true
  this.node = node
  this.$nextTick(() => {
    this.$refs.add.getDepartmentDetails()
  })
}

async getDepartmentDetails() {
  const data = await getDepartmentDetail(this.data.id)
  this.formData = data
  console.log(data)
}

当使用v-for渲染组件时，此时ref是一个数组，调用方法就无法直接使用this. $refs.xxx.方法名，需要配合数组遍历方法通过下标**this.$ refs.xxx[0].方法名**调用方法。如下图所示。