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

editorial_too_short:395

<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>