Блог

Главная - Вопросы по программированию - как предоставить методы компонентов в функции визуализации в vue3 с помощью ts

как предоставить методы компонентов в функции визуализации в vue3 с помощью ts

#typescript #vue.js #vue-component #vuejs3 #vue-render-function

Вопрос:

Я хочу вызвать методы дочернего компонента в родительском файле, и дочерний компонент создается функцией визуализации. ниже приведен мой код

ребенок.тс

 
export default {
  setup(props) {
    //...

    const getCropper = () => {
      return cropper
    }

    return () =>
      // render function
      h('div', { style: props.containerStyle }, [
      ])
  }

родитель.ts

 <template>
 <child-node ref="child"></child-node>
</template>

<script>
export default defineComponent({
  setup(){
    const child =ref(null)
    
    // call child method
    child.value?.getCropper()


    return { child }
  }

})
</script>

Комментарии:

1. Я не уверен, что есть удобный для TS способ сделать это. Подумайте о том, чтобы открыть проблему.

2. @EstusFlask Спасибо вам за ваши предложения. Я постараюсь это сделать.

3. Я опубликовал, как это можно сделать сейчас, но afaik Vue не будет обрабатывать типы для вас.

Ответ №1:

Экземпляр компонента может быть расширен с помощью expose , это полезно для случаев, когда setup возвращаемое значение уже является функцией визуализации:

 type ChildPublicInstance = { getCropper(): void }
  ...
  setup(props: {}, context: SetupContext) {
    ...
    const instance: ChildPublicInstance = { getCropper };
    context.expose(instance);
    return () => ...
  }

Экземпляр, предоставленный expose пользователем, небезопасен для ввода и должен быть набран вручную, например:

 const child = ref<ComponentPublicInstance<{}, ChildPublicInstance>>();

child.value?.getCropper()
Метки: