Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

É correto passar o tratador do metodo onclick como property ?

Olá pessoal, fiz o seguinte codigo para implementar o botao play/pause:

<template>
    <button class="button"  @click="onClickar" :disabled="botaoDisabled">
        <span class="icon">
            <i :class="iconName"></i>
        </span>
        <span>{{texto}}</span>
    </button>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    export default defineComponent({
        props:{
            onClickar: {
                type: Function,
                required: true
            },
            botaoDisabled: {
                type: Boolean,
                default: false
            },
            iconName: {
                type: String            
            },
            texto: {
                type: String,
                default: ''
            }
        }
    })
</script>

O uso do botão ficou assim:

  <BtnTemporizador 
                :onClickar="iniciar" 
                texto="Start" 
                icon-name="fas fa-play" 
                :botao-disabled="cronometroRodando" />

       <BtnTemporizador 
            :onClickar="finalizar" 
            texto="Stop!" 
            icon-name="fas fa-stop" 
            :botao-disabled="!cronometroRodando" />                

É certo criar o onClicar como type Function? o codigo funciona, mas o VS code está apontando como erro "Type 'Function' is not assignable to type '(payload: MouseEvent) => void'. Type 'Function' provides no match for the signature '(payload: MouseEvent): void'.ts(2322)"

1 resposta
solução!

Salve, Marcio!

Você pode ajustar o tipo da prop para um mais específico:

            onClickar: {
                type: (payload: MouseEvent) => void,
                required: true
            },

Assim a tipagem vai ficar certinha. E sim, é muito comum essa abordagem de recebermos o onClick via props.