vue3-003 vue3子调父以及ts类型定义

<script setup lang="ts">
import { defineComponent, ref, reactive, computed, PropType } from 'vue';

interface People {
  name: string;
  age: number;
}
interface IEvents {
  (e: 'change', value: string): void;
}
const props = withDefaults(defineProps<{ user?: People }>(), {
  // 默认值
  user: () => ({ name: 'xx', age: 1 }),
});

const emit = defineEmits<IEvents>();
const count = ref<number>(0);
const user: People = reactive({ name: 'shenfei', age: 198 });

const increase = () => {
  count.value++;
  user.age++;
  emit('change', 'xxxx');
};

const status = computed(() => {
  return {
    text: user.age > 200 ? '可以参加' : '不可以',
    disabled: user.age > 200,
  };
});
</script>

<template>
  <!-- 你的模板内容 -->
  <div>
    <button @click="increase">Count: {{ user.age }}</button>
    <button :disabled="status.disabled">Count: {{ status.text }}</button>
  </div>
</template>