前端 - vue3.js通过ref的方式获取子元素失败?

Question

vue3.js通过ref的方式获取子元素失败

Html

<test ref="testdata"></test>

js:

<script setup lang="ts">  import test from './test.vue'    const testdata = ref(null); onMounted(() => {  console.log(testdata.value,'testdata') })</script>

打印出来为null

Answer 1

在Vue3中，如果使用setup方法来写的话，在父组件中是无法直接通过ref来获取到子组件的实例对象的，也就意味着你再像Vue2那样去获取.

在Vue3中如果想要获取到子组件的方法或属性，需要主动向外暴露，下面写一个简单的例子
parent.vue

<template><test ref="tt"></text></template><script setup>import {ref, onmounted} from "vue";const tt = ref(null);onmounted(() => {    //要获取子组件中的myFun方法    console.log(tt.value.myFun)})</script>

子组件text.vue

<script setup>import { defineExpose } from "vue";function myFun() {  console.log("object");}let name = ref("bigNeck");// 要想父组件可以访问到子组件内的方法，需要主动暴露，使用的是defineExpose方法defineExpose({  myFun,  name,});</script>

以上就可以了，也就是说你想要获取子组件哪个方法或属性，都需要主动手动暴露。这也符合Vue3的开发思想，就是按需加载。

Answer 2

如果我没理解错，你的test.vue是一个子组件，你确定子组件被成功渲染出来了吗？

Answer 3

你遇到的问题是在 Vue 3 中使用 ref 获取子组件实例失败。这个问题的原因是你在 setup 函数中使用了 ref，但是你并没有将 ref 绑定到任何 DOM 元素或子组件实例上。

在 Vue 3 中，ref 是用于创建响应式引用的，它需要绑定到一个变量上。在你的代码中，你创建了一个名为 testdata 的 ref，但没有将它绑定到任何东西上。

为了解决这个问题，你需要将 ref 绑定到你想要获取的 DOM 元素或子组件实例上。在你的代码中，你可以将 ref 绑定到你的自定义组件 test 上。

以下是修改后的代码示例：

<template>  <test ref="testdata"></test></template><script setup lang="ts">import { ref, onMounted } from 'vue';import test from './test.vue';const testdata = ref(null);onMounted(() => {  console.log(testdata.value, 'testdata');});</script>

这样，你就可以通过 testdata.value 访问到你的子组件实例了。