如何在 vue3 的 <script setup> 中使用 props

Posted 2023-02-22

【中文标题】如何在 vue3 的 <script setup> 中使用 props

【英文标题】：How to use props in <script setup> in vue3

【发布时间】：2021-05-28 15:01:42

【问题描述】：

喜欢标题， 关于链接： New script setup (without ref sugar)

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

【参考方案1】：

要使用带有<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'
)

【参考方案2】：

使用 Vue-3.1 及更高版本的功能非常简单的答案：

CircleImage.view

<template>
  <div class="px-4 w-8/12 sm:w-3/12">
    <img :src="src" : 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"  />
    <CircleImage src="/file2.svg"  />
  </div>
</template>

<script setup>
import CircleImage from '@/components/CircleImage.vue'
</script>

另请参阅文档：Declaring props or additional options

【参考方案3】：

编辑：此答案已过时。 RFC 已更改为使用 defineProps(..)，如果使用 SFC，则会自动导入。

根据ongoing RFC，setup 标签后面可以有一个字符串，您可以在其中定义您希望拥有的上下文，如下所示：

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

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

这些与setup() 方法接收的参数相同。

【讨论】：

该 RFC 来自一个陈旧的分支并已被取代：PR - github.com/vuejs/rfcs/pull/227 Rendered - github.com/vuejs/rfcs/blob/master/active-rfcs/…

【参考方案4】：

我阅读了“Newscript setup”并找到了答案

首先，使用变量保存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>

【参考方案5】：

无需显式调用withDefaults

<script setup>
import  defineProps  from 'vue'

defineProps(
  isOpen: 
    type: Boolean,
    default: true
  
)
</script>