如何使用Vue 3合成API访问props？

wbrvyc0a 于 2023-05-01 发布在 Vue.js

关注(0)|答案(1)|浏览(210)

我试图构建一个非常简单的组件，它只呈现一个字符串 prop ，并在挂载时记录字符串 prop 。

<template>
  <div>
    <div>Prop: {{ typedProps.msgProp }}</div>
  </div>
</template>

<script lang="ts">
import { defineProps, onMounted } from "vue";

interface IDemoProps {
  msgProp?: string;
}

export default {
  setup(props: IDemoProps) {
    const typedProps = defineProps({
      msgProp: {
        type: String,
        required: true
      }
    });

    onMounted(() => {
      console.log(typedProps)
    });

    return { typedProps };
  }
};
</script>

当前typedProps在模板和设置方法中均为空？如何配置组件以正确访问msgProp？我还想给prop指定一个类型string。
谢谢你

vue.js

来源：https://stackoverflow.com/questions/76115858/how-can-i-access-props-using-the-vue-3-composition-api

1条答案

按热度按时间

xkftehaa1#

一种方法是使用setup script。这是推荐的SFC方法。
1.你不必从模板中引用 prop 。
1.你不必返回props、includes、computed等。从脚本
https://vuejs.org/api/sfc-script-setup.html#typescript-only-features

<template>
  <div>
    <div>Prop: {{ msgProp }}</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted } from "vue";

interface IDemoProps {
  msgProp: string;
}

const props = defineProps<IDemoProps>();

onMounted(() => {
 console.log(props)
});
</script>

赞(0）回复(0）举报 2023-05-01

我来回答

如何使用Vue 3合成API访问props？

1条答案

相关问题

热门标签

最新问答