我知道以前有人问过这个问题,但我尝试过的任何方法都不起作用,甚至是官方文档
我有一个视图示例 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构建
将 prop 与
:
一起使用意味着您将 JS 表达式分配给该 prop。在你的情况下,它只是一个未定义的标识符。
使用正确的表达方式:
<example :title="'xgfgdgdgsgdg'"></example>
或者删除
:
使道具成为字符串:
<example title="xgfgdgdgsgdg"></example>