es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Métodos de referencias en vue-composition-api

22 Jul, 2023 Programación

Hay un componente con un “ref” como este:

<template>
  <custom-component ref="func"></custom-component>
</template>

<script setup="">
const func = ref();
</script>

y dentro del componente hay una función como esta:

const helloWorld = () => {
    console.log('hello World');
}

¿Cómo puedo acceder a la función “helloWorld” desde el componente padre?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder a la función helloWorld desde el componente principal, puedes crear un nuevo método dentro del componente principal y referenciar la ref func a través de $refs.

    Por ejemplo:

    <!-- language: html -->
<template>
  <div>
    <custom-component ref="func"></custom-component>
    <button @click="callHelloWorld">Llamar a la función helloWorld</button>
  </div>
</template>

<script setup="">
  import { ref } from "vue";

  const func = ref();

  function callHelloWorld() {
    func.value.helloWorld();
  }
</script>

    En este ejemplo, creamos un nuevo método llamado callHelloWorld() que puede ser llamado desde el componente principal. Dentro de este método, podemos referirnos a la ref func a través de $refs y llamar a la función helloWorld() en ella.

    Cabe destacar que para que $refs funcione, el componente hijo (custom-component) debe registrarse con un atributo ref único. En este caso, lo hemos llamado func.

Comments are closed.