一招解决：this.$refs 引用子组件报错 is not a function？别怕，我有招！

2023-08-13 01:30:44

掌握 this.$refs：轻松操作子组件元素

在 Vue.js 中，**this.refs** 是一个强大的工具，允许我们从父组件操作子组件中的元素。然而，有时候我们会遇到 this.refs 返回 undefined 或无法调用子组件函数的问题。本博客将详细探讨这些问题的解决方法，让你轻松掌控 this.$refs 的使用。

this.$refs 返回 undefined

当 this.$refs 返回 undefined 时，通常是因为子组件中有多个 <template> 标签，但没有为每个 <template> 标签指定唯一的 ref 属性。解决方法很简单，只需要确保每个 <template> 标签都具有一个唯一的 ref 属性。

代码示例：

<!-- 子组件：存在多个 `<template>` 标签 -->
<template>
  <template ref="childRef1">
    <div>内容 1</div>
  </template>
  <template ref="childRef2">
    <div>内容 2</div>
  </template>
</template>

<!-- 修改后的子组件：每个 `<template>` 标签都有唯一的 ref 属性 -->
<template>
  <div ref="childRef">
    <template ref="childRef1">
      <div>内容 1</div>
    </template>
    <template ref="childRef2">
      <div>内容 2</div>
    </template>
  </div>
</template>

this.$refs.xxx is not a function

当 this.$refs.xxx 返回 is not a function 错误时，这意味着我们试图调用子组件中未定义的函数。解决方法是确保在子组件中正确定义了函数，并在方法中添加 methods 选项。

代码示例：

<!-- 子组件：未定义函数 -->
<template>
  <div>
    <button @click="childFunction">调用子组件函数</button>
  </div>
</template>

<!-- 修改后的子组件：定义了子组件函数 -->
<template>
  <div>
    <button @click="childFunction">调用子组件函数</button>
  </div>
</template>

<script>
  export default {
    methods: {
      childFunction() {
        console.log('子组件函数被调用了');
      }
    }
  }
</script>