Esta advertencia está destinada a evitar este uso particular (de los eslint(vue/valid-define-props) ):

 <script setup> /* ✗ BAD */ const def = { msg: String } defineProps(def) </script>

Si realmente intentó compilar ese bloque <script setup> en una compilación, el compilador emite este mensaje de error que aclara un poco el razonamiento:

defineProps() en <script setup> no puede hacer referencia a variables declaradas localmente porque se elevará fuera de la función setup() . Si las opciones de su componente requieren inicialización en el alcance del módulo, use un <script> normal separado para exportar las opciones en su lugar.

Sin embargo, importar el validador desde un módulo debería estar bien porque aquí no hay preocupación de izar variables locales. De hecho, compila sin errores (consulte la pestaña JS en el área de juegos de SFC).

Entonces creo que este es un falso positivo que podría ignorarse con un comentario:

 <script setup> import { validateMarkers } from "./hooks" import { defineProps } from 'vue' const props = defineProps({ markers: { type: [Array, Object], 👇 validator: validateMarkers, // eslint-disable-line vue/valid-define-props } }) </script>

La respuesta de @ tony19 responde correctamente a la pregunta OP y en versiones posteriores de eslint y Vue, no recibe esa advertencia para los enlaces importados.

Pero si aún recibe una advertencia o un error, ¡aquí le mostramos cómo solucionarlo!

Primero, tenemos que entender que un componente puede tener 2 alcances:

Ámbito de configuración:

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

Alcance del módulo:

 <script> // Module scope </script>

defineProps no debe hacer referencia a las variables locales declaradas en el ámbito de configuración

Porque defineProps y defineEmits se sacarán de la configuración al alcance del módulo

Así que el siguiente código no funcionará:

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

¿Cómo arreglar el código de arriba?

¡Variables de referencia que están en el alcance del módulo!

Solución 1. Los enlaces importados están en el ámbito local:

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

Solución 2. Variables declaradas en el alcance del módulo (no en la configuración del script):

 <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>