报错<script setup>
cannot contain ES module exports vue/no-export-in-script-setup
vue3-json-schema-form课程中StringField.vue照着打报错
原代码如下:
<template> <input type="text" :value="value" @input="handleChange" /></template>`<script lang="ts" setup="props">import { ref } from 'vue'import { FiledPropsDfine, Schema } from '../types'export default { props: FiledPropsDfine,}declare const props: { // 向ts声明props的定义 value: any onChange: (v: string) => void schema: Schema}export const handleChange = (e: any) => { console.log(e) props.onChange(e.target.value)}</script>
修改后代码如下:
<template> <input type="text" :value="value" @input="handleChange" /></template>`<script lang="ts" setup="props">import { FiledPropsDfine, Schema } from '../types'declare const props: FiledPropsDfine & { // 向ts声明props的定义 value: any onChange: (v: string) => void schema: Schema}const handleChange = (e: any) => { console.log(e) props.onChange(e.target.value)}</script>
type.ts文件代码片段如下:
import { SchemaRefs } from 'ajv/dist/compile'import { PropType } from 'vue'export enum SchemaTypes { 'NUMBER' = 'number', 'INTEGER' = 'intrger', 'STRING' = 'string', 'OBJECT' = 'object', 'ARRSY' = 'array', 'BOOLEAN' = 'boolean',}type SchemaRef = { $ref: string } // 预先定义 可以使用$ref引用schema// type Schema = anyexport interface Schema { type: SchemaTypes | string // 加上string有利于类型的校验 要不然只能用SchemaTypes.NUMBER来使用类型 const?: any format?: string default?: any properties?: { [key: string]: Schema | { $ref: string } } items?: Schema | Schema[] | SchemaRefs dependencies?: { [key: string]: string[] | Schema | SchemaRef } oneOf?: Schema[] anyOf?: Schema[] allOf?: Schema[] // vjsf?: VueJsonSchemaConfig required?: string[] enum?: any[] enumKeyValue?: any[] additionalProperties?: any additionalItems?: Schema}export const FiledPropsDfine = { schema: { type: Object as PropType<Schema>, required: true, }, value: { required: true, }, onChange: { type: Function as PropType<(v: any) => void>, required: true, }, rootSchema: { type: Object as PropType<Schema>, required: true, },} as const
主要问题就是说script标签中加上setup,代码块中不能再出现export default关键字,将该部分代码
export default { props: FiledPropsDfine,}declare const props: { // 向ts声明props的定义 value: any onChange: (v: string) => void schema: Schema}
修改为:
declare const props: FiledPropsDfine & { // 向ts声明props的定义 value: any onChange: (v: string) => void schema: Schema}