自定義組件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編譯模板，但是開發(fā)過程中prettier格式化對pug并不生效，經(jīng)過多次嘗試，確定可用的方法為vetur手動格式化（我的編輯器默認(rèn)格式化工具是prettier），編輯器vetur配置為"vetur.format.defaultFormatter.pug": "prettier",

image.png

image.png