Vue 3：“defineProps”引用本地声明的变量

为什么我收到警告错误消息：

defineProps引用本地声明的变量。 eslint(vue/valid-define-props)

当我在 props 中使用自定义验证器时SFC <script setup> mode:

<script setup>
import { validateMarkers } from "./hooks"
import { defineProps } from 'vue'

const props = defineProps({
  markers: {
    type: [Array, Object],
    validator: validateMarkers
  }
})
</script>

我的自定义验证器：

export const validateMarkers = (markers) =>
    isNotEmpty(markers)
        ? isObject(markers)
            ? markerValidator(markers)
            : isNotEmptyArray(markers)
            ? markers.every((marker) => markerValidator(marker))
            : error('Undefined type of prop marker')
        : null

我该如何解决这个警告？

@tony19 的答案正确回答了 OP 问题，在 eslint 和 Vue 的更高版本中，您不会收到导入绑定的警告。

但如果您仍然收到警告或错误，请按以下方法修复！

首先，我们必须了解一个组件可以有 2 个作用域：

设置范围：

<script setup>
// Setup scope
</script>

模块范围：

<script>
// Module scope
</script>

defineProps不应引用在设置范围内声明的局部变量

Because defineProps and defineEmits将从设置中提升到模块范围

所以下面的代码将不起作用：

<script setup>
  const sizes = ['sm', 'md']

  const props = defineProps({
    size: {
      type: String,
      validator: val => sizes.includes(val) // <= Can't reference `sizes`
    }
  })
</script>

如何修复上面的代码？

引用模块范围内的变量！

解决方案 1. 导入的绑定位于本地范围内：

<script setup>
import { sizes } from './sizes' // <= import it

const props = defineProps({
  size: {
    type: String,
    validator: val => sizes.includes(val) // <= use it
  }
})
</script>

解决方案 2. 在模块作用域中声明的变量（不是脚本设置）：

<script setup>
const props = defineProps({
  size: {
    type: String,
    validator: val => sizes.includes(val) // <= sizes from module scope
  }
})
</script>

<script>
const sizes = ['sm', 'md'] // <= sizes can be accessed in setup scope

export default {}
</script>