blob: 74820f7f0d1dd5d6cfd69bccfaa36278625b25ac (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<template>
<!--
Seeing type errors on the word `class`?
This unfortunately happens because @types/react's JSX definitions leak into every file due to being declared globally.
There's currently no way to prevent this when using both Vue and React with TypeScript in the same project.
You can read more about this issue here: https://github.com/johnsoncodehk/volar/discussions/592
-->
<div class="counter">
<button @click="subtract()">-</button>
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
<div class="counter-message">
<slot />
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => (count.value = count.value + 1);
const subtract = () => (count.value = count.value - 1);
return {
count,
add,
subtract,
};
},
};
</script>
|
