Vuejs 3 个 props 均未定义

Question

我知道以前有人问过这个问题，但我尝试过的任何方法都不起作用，甚至是官方文档

我有一个视图示例 vue 组件，我想传递一个 prop 以便我可以显示它

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        {{ title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  title: String
})

console.log(props.title);


</script>

app.js

import { createApp } from 'vue';
import Example from './components/ExampleComponent.vue';

const app = createApp({});

app.component('example', Example);
app.mount('#app');

我这样称呼我的组件

<example :title="xgfgdgdgsgdg"></example>

模板中没有显示任何内容，config.log() 也显示

undefined

我正在使用最新版本的vue3并使用Vite构建

Answer 1

将 prop 与

:

一起使用意味着您将 JS 表达式分配给该 prop。在你的情况下，它只是一个未定义的标识符。

使用正确的表达方式：

<example :title="'xgfgdgdgsgdg'"></example>

或者删除

:

使道具成为字符串：

<example title="xgfgdgdgsgdg"></example>