Javascript 如何在<；中使用道具；脚本设置>；在vue3中

像标题一样， 关于链接：

{{no}}
从“@/layout/TopNavbar.vue”导入TopNavbar
从“vue”导入{defineProps，reactive}
定义项目({
否：字符串
})
常数状态=无功({
房间：{}
})
const init=async（）=>{
//我想在这里使用道具
//const{data}=wait getRoomByNo（props.no）
//控制台日志（数据）；
}
init（）

我读了“新建

脚本设置”

，找到了答案

首先，使用变量save

defineProps

const props = defineProps({
  no: String
})

然后使用它

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

以下是所有代码：

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

{{no}}
从“@/layout/TopNavbar.vue”导入TopNavbar
从“vue”导入{defineProps，reactive，useContext}
常量道具=定义道具({
否：字符串
})
常数状态=无功({
房间：{}
})
const init=async（）=>{
控制台日志（道具编号）；
}
init（）

要将道具与

一起使用，您需要使用组件道具选项作为参数调用

defineProps（）

，这将定义组件实例上的道具，并返回一个带有道具的

被动

对象，您可以使用该对象，如下所示：

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

{{no}}
从“@/layout/TopNavbar.vue”导入TopNavbar；
从“vue”导入{defineProps，reactive}；
常量道具=定义道具({
否：字符串，
});
const{no}=toRefs（props）；
常数状态=无功({
会议室：{}，
});
const init=async（）=>{
const{data}=wait getRoomByNo（no.value）；
控制台日志（数据）；
};
init（）；

如果您使用的是typescript，另一种方法是传递一个纯类型声明，并从中推断prop类型。专业的是，你会得到更严格的类型安全，但你不能有默认值

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

{{no}}
从“@/layout/TopNavbar.vue”导入TopNavbar；
从“vue”导入{defineProps，reactive}；
const props=defineProps（）；
const{no}=toRefs（props）；
常数状态=无功({
会议室：{}，
});
const init=async（）=>{
const{data}=wait getRoomByNo（no.value）；
控制台日志（数据）；
};
init（）；

根据，

设置

标记可以在下面有一个字符串，您可以在其中定义希望具有的上下文，如下所示：

<script setup="props, { emit }">
import { watchEffect } from 'vue';

watchEffect(() => console.log(props.msg));
emit('foo');
</script>

从“vue”导入{watchEffect}；
watchEffect（（）=>console.log（props.msg））；
发出（“foo”）；

这些参数与

setup（）

方法接收的参数相同

<script setup="props, { emit }">
import { watchEffect } from 'vue';

watchEffect(() => console.log(props.msg));
emit('foo');
</script>