我正在尝试将Vue 3与我们的CMS集成,CMS也有一个Vue 2.6项目并行运行。
我已经能够在我们的CMS中创建一个示例小部件,它可以正确地渲染我的HelloWorld组件。然而,当我试图向该组件传递一个prop时,该组件似乎没有接收到prop,并且没有渲染。控制台显示错误Missing required prop: "msg" at <HelloWorld>
。
我的视图代码看起来像这样:
<wvd-hello-world msg="Hello World, coming to you from a Vue 3 component" />
字符串
我的组件:
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>
<template>
<div>
<h1 class="green">{{ msg }}</h1>
</div>
</template>
型
我的main.ts
:
import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
createApp(HelloWorld).mount("wvd-hello-world");
型
我做错了什么?我的组件没有 prop 渲染。
这是什么是渲染:
<wvd-hello-world msg="Hello World, coming to you from a Vue 3 component" data-v-app=""><div><h1 class="green"></h1></div></wvd-hello-world>
型
1条答案
按热度按时间cbjzeqam1#
使用
字符串
因为
型
表示
$props.msg
应为string
(不允许undefined
)。型
表示在入口HTML文件(
index.html
)中将<HelloWorld />
**渲染为<wvd-hello-world>
。正如你所看到的,
<HelloWorld>
没有接收到propmsg
,这意味着$props.msg
是undefined
,但这是不允许的。