vue.js 当尝试将prop传递给我的Hello World组件时,“缺少必需的prop”

tjjdgumg  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(233)

我正在尝试将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>

cbjzeqam

cbjzeqam1#

使用

defineProps<{
  msg?: string
}>()

字符串
因为

defineProps<{
  msg: string
}>()


表示$props.msg应为string(不允许undefined)。

createApp(HelloWorld).mount("wvd-hello-world");


表示在入口HTML文件(index.html)中将<HelloWorld />**渲染为<wvd-hello-world>
正如你所看到的,<HelloWorld>没有接收到prop msg,这意味着$props.msgundefined,但这是不允许的。

相关问题