如何在vue中通过defineExpose访问数据和方法

Question

`我试图在 Vue(composition api) 中访问从子组件到父组件的方法，我已经在 DefineExpose 中定义了该方法，但无法在父组件中访问它

Hero.vue（子组件）

<template>
  <section data-testid="hero-section" class="flex flex-row gap-2 justify-between ">
    <h1 class="text-xl font-semibold text-ds-dark-500">
      {{ greeting }}
    </h1>
    <div>
      <Input v-model="searchQueryValue" data-testid="hero-section-input" placeholder="Search across use case" licon="fas fa-search" liconClasses="text-dark-60% px-1" inputClasses="rounded-full !border-1 !border-dark-20%" @input="handleSearch" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, defineEmits, ref } from 'vue';
import useUserDerivedDetails from '~/composables/useUserDerivedDetails';
import Input from '~/components/Input.vue';
import { useTranslation } from 'i18next-vue';
import { getGreeting } from '../utils';

const emit = defineEmits(['search', 'clearSearch']);
const { t: $t } = useTranslation();

const { user } = useUserDerivedDetails();

const searchQueryValue = ref('');
const userName = computed(() => {
  const name = user.value.firstName || user.value.lastName || '';
  return `${name}`.trim();
});

const greeting = computed(() => {
  return $t(getGreeting(searchQueryValue.value, userName.value));
});

function handleSearch(e: Event) {
  emit('search', e);
}
function clearSearch() {
  searchQueryValue.value = '';
  emit('clearSearch');
}

defineExpose({
  clearSearch,
});
</script>

我尝试使用 ref 分配给组件，但没有成功`

Answer 1

使用参考：

const $hero = ref()

//later after mounting

$hero.value.clearSearch()

// in template

<hero ref=”$hero" ..