Code Templates

vue-component.vue

<template>
    <div ref="fooDiv" @click="onClicked">Hello {{ counter }} Clicks</div>
  </template>
  <script setup lang="ts" >
  
  import { defineProps, ref, onMounted } from 'vue';
  
  const props = defineProps<{ foo?: number }>();
  const emit = defineEmits<{ (e: 'update:clicks', clicks: number): void }>();
  const counter = ref<number>(props.foo ?? 0);
  const onClicked = () => { emit("update:clicks", ++counter.value); }
  
  onMounted(() => {
    console.info(`[hello-component] mounted ${props.foo}`);
  });
  
  
</script>