defineProps и withDefaults

Props - это механизм передачи данных от родительского компонента к дочернему.

1
2
3
4
5
6
7
8
// App.vue<script setup>import Comp from './Comp.vue'</script>  <template>  <Comp title='myTitle' :count='10'/></template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Comp.vue<script setup lang="ts">interface Props {  title: string,  count: number}  const {title, count} = defineProps<Props>()</script>  <template>  <h1>{{title}}</h1>  <p>count: {{count}}</p></template>

withDefaults — это утилита TypeScript в Composition API Vue 3, которая позволяет задавать значения по умолчанию для props в компонентах с использованием <script setup>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup lang="ts">interface Props {  title?: string,  count?: number}  const props = withDefaults(defineProps<Props>(), {  title: 'title',  count: 15})</script>  <template>  <h1>{{props.title}}</h1>  <p>count: {{props.count}}</p></template>