Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

245
Visualizações
How to extend property of ComponentPublicInstance provided by Vue 3 in a certain vue file

I want add a custom property to ComponentPublicInstance. Example, I have a Vue file. It is using Vue 3 Composition API with <script setup lang='ts'> and I declared a Function, like this:

<script setup lang='ts'>
  function close() {
    console.log("It will be closed")
  }
</script>

I redner this file by render porvided by vue, and this is part of my code:

export const Notification = function (options: Options){
  const container = document.createElement('div')
  const vnode = h(notification, {...options}) 
  // The Render contribute to make vnode processing diff and patch and then mounted on the Container
  render(vnode, container)
  const instance = vnode.component?.proxy
  addIntance(vnode.component as ComponentInternalInstance)
  console.log("vnode.component", vnode.component)
  return instance
} as NotificationProperty

There is an Array named instanceList saving the instance of Notification, and I want to call the close in the instance, and I got a error Property 'close' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.. This is my code:

Notification.closeAll = function () {
  instanceList.forEach((instance: ComponentInternalInstance, index: number) => {
    instance.proxy?.close() // There is an error.
    instanceList.splice(1, index)
  })
}

I have tried to use the methods following.

  1. using defineExpose to export close function.
  2. to declare a module in the shims-vue.d.ts
declare module "./components/notification/Notification.vue" { 
  interface ComponentCustomProperties {
    close: () => any;
  }
}

or

declare module "@vue/runtime-core" { 
  interface ComponentCustomProperties {
    close: () => any;
  }
}

Both are not working.

Now, I have no idea how to cope with the problem. Thanks for your help.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda