vue3+ts 父组件使用ref获取子组件属性失效？请看这里(^o^)/

原创于 2024-12-25 17:49:41 发布 · 449 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

使用 <script setup>写法会导致父组件无法访问到子组件中的属性和方法，需要使用defineExpose将其暴露出去。

子组件(children.vue):

<template>
  <div>
    {{ str }}
  </div>
</template>

<script setup lang="ts">
  import { ref, defineExpose } from 'vue';
  const str = ref('嘻嘻');
  defineExpose({ str }); // 敲黑板 看重点
</script>

父组件(parent.vue):

<template>
  <div>
    <children ref="childrenRef" />
  </div>
</template>

<script setup lang="ts">

  import children from './children.vue';
  import { ref } from 'vue';
  
  const childrenRef = ref(null);
  console.log(childrenRef.value?.str);
  
</script>