← Каталог
Vue и Svelte — готовые компоненты — Дочерний компонент — Vue
Фрагмент из «Vue и Svelte — готовые компоненты»: Дочерний компонент — Vue.
<script setup>
defineProps({
value: { type: Number, required: true },
})
const emit = defineEmits(['increment', 'decrement', 'reset'])
</script>
<template>
<section class="counter">
<h2>Счётчик: {{ value }}</h2>
<button type="button" @click="emit('decrement')">−</button>
<button type="button" @click="emit('reset')">Сброс</button>
<button type="button" @click="emit('increment')">+</button>
</section>
</template><script setup>
defineProps({
value: { type: Number, required: true },
})
const emit = defineEmits(['increment', 'decrement', 'reset'])
</script>
<template>
<section class="counter">
<h2>Счётчик: {{ value }}</h2>
<button type="button" @click="emit('decrement')">−</button>
<button type="button" @click="emit('reset')">Сброс</button>
<button type="button" @click="emit('increment')">+</button>
</section>
</template><script setup>
import { ref } from 'vue'
import Counter from './components/Counter.vue'
const count = ref(0)
</script>
<template>
<Counter
:value="count"
@increment="count++"
@decrement="count--"
@reset="count = 0"
/>
</template><script setup>
import { ref } from 'vue'
import Counter from './components/Counter.vue'
const count = ref(0)
</script>
<template>
<Counter
:value="count"
@increment="count++"
@decrement="count--"
@reset="count = 0"
/>
</template>