问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
dayDayUp
    1521049

    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

    vue3前端
    阅读 4.2k
    avatarAI BotBETA

    你遇到的问题是在 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 访问到你的子组件实例了。

    3 个回答
    得票最新
    头像
    一个凹
      259110
      ✓ 已被采纳

      在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的开发思想，就是按需加载。

      头像
      zeronofreya
        19212471

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

        头像
        刻画未来
          142
          <template>
    <test ref="tt"></text>
</template>
<script setup lang="ts">
  import { ref, onMounted, nextTick, defineExpose } from "vue";
  import test from './test.vue'

  const testdata = ref();
  onMounted(async (){
      await nextTick()
      console.log(testdata.value,'testdata')
  })
</script>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏