GH BLOGSvue 3.3
导入复杂类型支持
- 组件
vue
<script setup lang="ts">
// type Props = {
// name: string;
// age: number;
// };
import { Props } from './type';
// imported + intersection type
defineProps<Props & { extraProp: string }>();
</script><script setup lang="ts">
// type Props = {
// name: string;
// age: number;
// };
import { Props } from './type';
// imported + intersection type
defineProps<Props & { extraProp: string }>();
</script>- 使用
vue
<script lang="ts" setup>
import ImportedAndComplexTypesSupport from './ImportedandComplexTypesSupport.vue';
</script>
<template>
<ImportedAndComplexTypesSupport
:age="18"
name="哈哈哈"
extra-prop=""
></ImportedAndComplexTypesSupport>
</template><script lang="ts" setup>
import ImportedAndComplexTypesSupport from './ImportedandComplexTypesSupport.vue';
</script>
<template>
<ImportedAndComplexTypesSupport
:age="18"
name="哈哈哈"
extra-prop=""
></ImportedAndComplexTypesSupport>
</template>DefineEmits
- 组件
vue
<script setup lang="ts">
const emits = defineEmits<{
change: [num: number];
update: [num: number, ...reset: any[]];
}>();
</script>
<template>
<a-button @click="emits('change', 666)">change</a-button>
<a-button @click="emits('update', 666, 7777, '哈哈哈')">update</a-button>
</template>
<style scoped lang="less"></style><script setup lang="ts">
const emits = defineEmits<{
change: [num: number];
update: [num: number, ...reset: any[]];
}>();
</script>
<template>
<a-button @click="emits('change', 666)">change</a-button>
<a-button @click="emits('update', 666, 7777, '哈哈哈')">update</a-button>
</template>
<style scoped lang="less"></style>- 使用
Reactive Props
- 开启自定义属性结构解析
js
// vite
defineConfig({
// ...
plugins: [
vue({
reactivityTransform: true,
}),]
// ...
})
// vitepress
export default defineConfig({
// ...
vue: {
script: {
propsDestructure: true,
},
},
// ...
});// vite
defineConfig({
// ...
plugins: [
vue({
reactivityTransform: true,
}),]
// ...
})
// vitepress
export default defineConfig({
// ...
vue: {
script: {
propsDestructure: true,
},
},
// ...
});- 组件
vue
<script setup lang="ts">
import { watchEffect } from 'vue';
const { name, age } = defineProps<{
name: number;
age: number;
}>();
watchEffect(() => {
console.log(name, age);
});
</script>
<template>
<div>{{ name }}</div>
<div>{{ age }}</div>
</template><script setup lang="ts">
import { watchEffect } from 'vue';
const { name, age } = defineProps<{
name: number;
age: number;
}>();
watchEffect(() => {
console.log(name, age);
});
</script>
<template>
<div>{{ name }}</div>
<div>{{ age }}</div>
</template>- 使用
defineModel
- config中开启defineModel
js
export default defineConfig({
// ...
vue: {
script: {
defineModel: true,
},
},
// ...
});export default defineConfig({
// ...
vue: {
script: {
defineModel: true,
},
},
// ...
});- 定义子组件
vue
<script setup>
const modelValue = defineModel();
</script>
<template>
<input v-model="modelValue" />
</template><script setup>
const modelValue = defineModel();
</script>
<template>
<input v-model="modelValue" />
</template>- 使用组件