como Título, sobre el enlace: Nueva script setup (sin azúcar de referencia)
<template> <TopNavbar title="room" /> <div> {{ no }} </div> </template> <script setup> import TopNavbar from '@/layout/TopNavbar.vue' import { defineProps, reactive } from 'vue' defineProps({ no: String }) const state = reactive({ room: {} }) const init = async () => { // I want use props in this // const { data } = await getRoomByNo(props.no) // console.log(data); } 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>Los valores predeterminados con accesorios de solo tipo ahora son posibles:
interface Props { msg?: string } const props = withDefaults(defineProps<Props>(), { msg: 'hello' })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
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() .