如何在vue3的<scriptsetup>中使用props

html5 • • 问答

喜欢标题，关于链接：
新的script setup（不含参考糖）

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

回答

要使用道具，<script setup>您需要defineProps()使用组件道具选项作为参数进行调用，这定义了组件实例上的道具并返回一个reactive带有道具的对象，您可以按如下方式使用：

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

如果您使用打字稿，另一种方法是传递仅类型声明并从中推断道具类型。优点是你会得到更严格的类型安全，但你不能有默认值。

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

编辑

现在可以使用仅限类型的道具的默认值：

interface Props {
  msg?: string
}

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

以上是如何在vue3的&lt;scriptsetup&gt;中使用props的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>