学做视频的网站有哪些,window7用jsp做的网站要什么工具,做教学的视频网站,wordpress增加h5网页距离vue3.3发布已经过了一年多(2023.5.11),vue3.3提高开发体验的新特性你用了吗#xff1f; 组件内部导入复杂类型 3.3之前想在组件内部导入复杂类型做props类型是不支持的。 script setup langtsimport type { People } from /types;withDefaults(define… 距离vue3.3发布已经过了一年多(2023.5.11),vue3.3提高开发体验的新特性你用了吗 组件内部导入复杂类型 3.3之前想在组件内部导入复杂类型做props类型是不支持的。 script setup langtsimport type { People } from /types;withDefaults(definePropsPeople(), {name: 张三,age: 18,}); /scripttemplatediv{{ name }}{{ age }}/div /templateGeneric Components 如果组件定义时你不确定使用者需要传入什么样的属性类型可以根据使用者传入属性值来定组件自定义属性类型那么Generic Components 必定适合你 组件定义 script setup langts genericTdefineProps{people: T;}(); /scripttemplatediv{{ people }}/div /template组件使用 script setup langtsimport GenericComponents from /components/GenericComponents.vue; /scripttemplateGenericComponents :people{ name: wgh, age: 18 }/GenericComponentsGenericComponents:people{ name: wgh, age: 18, class: 超级一班 }/GenericComponents /templatedefineEmits简写 3.3可以吧defineEmits写成键值对形式看起来很简洁清晰。 // BEFORE const emit defineEmits{(e: foo, id: number): void(e: bar, name: string, ...rest: any[]): void }()// AFTER const emit defineEmits{foo: [id: number]bar: [name: string, ...rest: any[]] }()example script setup langtsconst emits defineEmits{change: [num: string];update: [num: number, ...reset: any[]];}(); /scripttemplatediv clickemits(change, change)change/divdiv clickemits(update, 123, 666, 888, 77, 111)update/div /template组件使用 script setup langtsimport DefineEmits from /components/DefineEmits.vue;const fn (res, ...reset) {console.log(res, reset);}; /scripttemplatedefine-emits changefn updatefn / /templatedefineModel组件定义双向数据api 给组件添加双向数据绑定可以增加组件易用性,之前组件双向数据绑定都是定义emit事件来实现的。有了这个api就可以不写emit啦,哈哈哈。 script setup langts// beforeconst props defineProps{cont: number;}();const emits defineEmits{update:cont: [cont: number];}();// const add () {// emits(update:cont, props.cont 1);// };// afterconst num defineModel(num, {required: true,default: 2,});const add () {emits(update:cont, props.cont 1);num.value;}; /scripttemplatedivcont:{{ cont }} | num:{{ num }}/divbutton clickadd/button /template是不是写起来方便多了。 vue3.4新特性(组件使用时变量属性同名简写) vue3.4发布时间是23年12月28,对于开发者来说主要是defineModel 双向数据绑定api稳定和变量属性同名简写。 component script setup langtsdefineProps{name: string;age: number;}(); /scripttemplateh1同名简写/h1div{{ name }}--{{ age }}/div /templateuse script setup langtsimport { ref } from vue;import SameNameShorthand from /components/Same-nameShorthand.vue;const name ref(渣渣辉);const age ref(18); /scripttemplateDefineModel v-model:valuename/DefineModel /template