Tengo un componente secundario llamado ZimModel.vue donde creé un método drawGrid() . Necesito llamar a este método en el componente principal ( mainPage.vue ). La idea es llamar a este método una vez que el usuario haya terminado de escribir valores en la entrada (a saber: ancho de la cuadrícula; agregué el evento @input a v-model="inputWidth" ). Es por eso que también uso setTimeout con un retraso de 5 segundos. Sin embargo, no tengo idea de cómo 'enviar' este método al componente principal. Probé con emit pero no creo que tenga ningún sentido. Uso la tienda Vuex en mi aplicación, pero este método en particular está estrictamente relacionado con otros datos y métodos en ZimModel.vue , por lo que no creo que tenga sentido moverlo a Vuex. ¿Hay algún patrón/buena práctica que deba seguir en este caso?
Aquí hay un ejemplo reproducible: https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/mainPage.vue . Como ejemplo, agregué el método myGreeting() (en mainPage.vue ) para mostrar cómo quiero que funcione mi programa. Necesito reemplazar este método ejemplar con el método target drawGrid() .
Usar $ref resolverá su problema:
<ZimModel ref="zimModel" />Y dentro de tu método:
triggerDrawing() { clearTimeout(this.timer); // this.timer = setTimeout(this.myGreeting, 5000); this.$refs.zimModel.drawGrid(); }Si bien la ref de uso debería funcionar, debe considerar subcontratar el método a un .js e importar el método en los archivos que lo necesita. Esto es especialmente recomendable cuando se utiliza un método en varios componentes.
En el nuevo archivo:
export function drawGrid() { // Your code }En sus componentes
</template> <script> import { drawGrid } from 'relativePath' // using {} you can import a single function or few select to improve effectiveness ...Entonces puedes simplemente llamar a la función.