繁体   English   中英

道具的使用方法<script setup> in vue3

[英]How to use props in <script setup> in vue3

像标题,关于链接: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>

要将 props 与<script setup>一起使用,您需要使用组件 prop 选项作为参数调用defineProps() ,这将定义组件实例上的 props 并返回一个带有 props 的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'
})

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

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>

另请参阅文档: 声明道具或附加选项

编辑:这个答案已经过时了。 RFC 已更改为使用defineProps(..) ,如果使用 SFC,则会自动导入。

根据正在进行的 RFCsetup标记可以有一个字符串,您可以在其中定义您希望拥有的上下文,如下所示:

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

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

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

无需显式调用withDefaults

<script setup>
import { defineProps } from 'vue'

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

我阅读了“新script 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>

使用Typescript ,你可以用两种语法定义你的道具:

  1. 第一种语法

<script setup lang="ts">
import {PropType} from 'vue'

const props=defineProps({
   color:{
      type:String as PropType<'primary'|'info'|'success'|'error'|'warning'>,
      default :'primary'
    }
})

</script>

  1. 第二种语法

<script setup lang="ts">

type Color='primary'|'info'|'success'|'error'|'warning'

const props=defineProps<{color:Color}>()

</script>

此语法仅支持:

  • 类型文字
  • 对同一文件中的接口或类型文字的引用

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM