Leí " script setup " y encontré la respuesta

primero, use la variable save defineProps

 const props = defineProps({ no: String })

entonces utilízalo

 const init = async () => { console.log(props.no); }

esto es todo codigo:

 <template> <TopNavbar title="room" /> <div> {{ no }} </div> </template> <script setup> import TopNavbar from '@/layout/TopNavbar.vue' import { defineProps, reactive, useContext } from 'vue' const props = defineProps({ no: String }) const state = reactive({ room: {} }) const init = async () => { console.log(props.no); } init() </script> <style> </style>

Para usar accesorios con <script setup> , debe llamar a defineProps() con las opciones de accesorios del componente como argumento, esto define los accesorios en la instancia del componente y devuelve un objeto reactive con los accesorios que puede usar de la siguiente manera:

 <template> <TopNavbar title="room" /> <div> {{ no }} </div> </template> <script setup> import TopNavbar from "@/layout/TopNavbar.vue"; import { defineProps, reactive } from "vue"; const props = defineProps({ no: String, }); const { no } = toRefs(props); const state = reactive({ room: {}, }); const init = async () => { const { data } = await getRoomByNo(no.value); console.log(data); }; init(); </script>

Si está utilizando mecanografiado, la forma alternativa de hacerlo es pasar una declaración de solo tipo e inferir los tipos de accesorios a partir de eso. Las ventajas son que obtendrá una seguridad de tipo más estricta, pero no puede tener valores predeterminados.

 <template> <TopNavbar title="room" /> <div> {{ no }} </div> </template> <script setup> import TopNavbar from "@/layout/TopNavbar.vue"; import { defineProps, reactive } from "vue"; const props = defineProps<{ no: string, }>(); const { no } = toRefs(props); const state = reactive({ room: {}, }); const init = async () => { const { data } = await getRoomByNo(no.value); console.log(data); }; init(); </script>

EDITAR

Los valores predeterminados con accesorios de solo tipo ahora son posibles:

 interface Props { msg?: string } const props = withDefaults(defineProps<Props>(), { msg: 'hello' })

Editar: esta respuesta está desactualizada. El RFC se cambió para usar defineProps(..) , que se importa automáticamente si se usan SFC.

Según el RFC en curso , la etiqueta de setup puede tener una cadena a continuación donde puede definir qué contexto desea tener, así:

 <script setup="props, { emit }"> import { watchEffect } from 'vue'; watchEffect(() => console.log(props.msg)); emit('foo'); </script>

Estos son los mismos argumentos que recibe el método setup() .

No es necesario llamar explícitamente a los withDefaults

 <script setup> import { defineProps } from 'vue' defineProps({ isOpen: { type: Boolean, default: true } }) </script>

Respuesta muy simple usando funciones de Vue-3.1 y posteriores:

CircleImage.view

 <template> <div class="px-4 w-8/12 sm:w-3/12"> <img :src="src" :alt="alt" class="border-none rounded-full h-auto max-w-full align-middle" /> </div> </template> <script setup> const props = defineProps({ src: String, alt: String, }) </script>

MyView.view

 <template> <div class="flex flex-wrap justify-center"> <CircleImage src="/file1.jpg" alt="one" /> <CircleImage src="/file2.svg" alt="two" /> </div> </template> <script setup> import CircleImage from '@/components/CircleImage.vue' </script>

Consulte también la documentación: Declaración de accesorios u opciones adicionales