vue3+ts 搭建系统问题小结

自定义组件v-model报错

  "不能将类型“{ modelValue: { week: string; number: number; startTime: string; endTime: string; }[]; }”分配给类型“IntrinsicAttributes & (Partial<{ [x: number]: string; } | {}> & Omit<(readonly string[] | Readonly<ExtractPropTypes<Readonly<ComponentObjectPropsOptions<Data>>>>) & (VNodeProps & ... 2 more ... & Readonly<...>), never>)”。\n  不能将类型“{ modelValue: { week: string; number: number; startTime: string; endTime: string; }[]; }”分配给类型“IntrinsicAttributes & Partial<{}> & Omit<(readonly string[] | Readonly<ExtractPropTypes<Readonly<ComponentObjectPropsOptions<Data>>>>) & (VNodeProps & ... 2 more ... & Readonly<...>), never>”。",

解决方案：使用v-model:xx格式

// 父
NumberList(v-model:list="numberList" @change="handleChangeNumber")

// 子
props: {
    list: {
        type: Array as PropType<NumberType[]>,
            default: () => {
            return [];
            }
    }
},

setup(props, { attrs, emit }) {
    const numberList: any = computed({
        get() {
            return props.list;
        },
        set(val) {
            emit("update:list", val);
        }
    });
})

ts声明props类型

import { computed, ref, defineComponent, PropType } from "vue";
props: {
  list: {
      type: Array as PropType<NumberType[]>,
      default: () => {
       return [];
      }
  }
}

使用pug模板

安装pug编译模板，但是开发过程中prettier格式化对pug并不生效，经过多次尝试，确定可用的方法为vetur手动格式化（我的编辑器默认格式化工具是prettier），编辑器vetur配置为"vetur.format.defaultFormatter.pug": "prettier",

image.png

image.png