vue利用ref实现父子组件通信及避坑_vue2$refs在通信时的弊端?-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44424820/article/details/131865027

文章通过一个Vue应用的例子展示了如何在父组件和子组件之间进行通信。父组件通过绑定自定义事件`fun1`到子组件`test`并监听`testRef`事件，子组件在`changeVal`方法中触发这些事件。同时，文章强调了使用`ref`时需要注意的事项，如DOM渲染完成后再访问，以及引用数组形式的`ref`与字符串形式的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件：

<template>
  <div>
    <!-- 给test1组件实例对象绑定一个自定义事件，事件名为fun1，调用函数为testFun1 -->
    <test @fun1="testFun1()"></test>
    <!-- 自定义事件的ref书写方式 -->
    <test2 ref="test_fun2"></test2>
  </div>
</template>

<script>
import { test } from 'node:test';
import test2 from './test2'

export default {
  name: 'App',
  components: { test, test2 },
  methods: {
    testFun1 () {
      console.log(1);
    },
    tip () {
      alert(1);
    }
  },
  mounted () {
    // 自定义事件名为：testRef，调用tip函数
    this.$refs.test_fun2.$on('testRef', this.tip);
  }
}
</script>

子组件：

// test.vue
<template>
  <div>
    <el-input type="text" @change="changeVal"></el-input>
  </div>
</template>

<script>
export default {
  name: test,
  methods: {
    changeVal () {
      this.$emit('fun1');
    }
  }
}

</script>

// test2.vue
<template>
  <div>
    <el-input type="text" @change="changeVal"></el-input>
  </div>
</template>

<script>
export default {
  name: test,
  methods: {
    changeVal () {
      this.$emit('testRef');
    }
  }
}

</script>

注意：

1、通过:ref = 某变量来添加ref（即添加了：号），如果想获取该ref时需要添加[0]。如：this. $re f s [re f s A rr a y] [0] ；如果是 re f = 某字符串时则不需要添加，如： t hi s .$ refs[refsArray];
2、ref需要在dom渲染完成后才会有，在使用的时候必须确保dom已经渲染好。比如在生命周期mounted(){}中调用，或者在this.$nextTick(() => {})中调用；