Vue 3 道具未通过
Vue 3 prop not being passed
我试图将一个简单的道具传递给 Vue 3.0.11 中的另一个组件,但我似乎无法让它工作。这是我的 App 组件:
<template>
<Loading :message="Importing"></Loading>
</template>
<script>
import Loading from "./components/Loading.vue";
export default {
name: "App",
components: { Loading },
};
</script>
<style>
</style>
我的 Loading
组件:
<template>
<div>{{ loadingText }}...</div>
</template>
<script>
export default {
name: "Loading",
props: ["message"],
data() {
return {
loadingText: this.message || "Loading",
};
},
};
</script>
<style scoped>
</style>
我正在尝试传递值为 Importing
的道具 message
,但在加载组件中它告诉我 message
道具未定义。这是一个 REPREX:https://codesandbox.io/s/vibrant-raman-pweb4
我做错了什么?
您正在尝试使用 v-bind:
shorthand 语法将其传递到道具中::
.
Vue 期待您传入变量 Importing
。这不存在,因此解析为未定义。
因为您的消息只是一个内联字符串,您需要远程 :
或用单引号或反引号将“Importing”括起来(如果您想进行不够复杂的字符串插值,这很有用保证计算):
<Loading message="Importing"></Loading>
或
<Loading :message="'Importing'"></Loading>
这也行得通:
<template>
<Loading :message="message"></Loading>
</template>
<script>
import Loading from "./components/Loading.vue";
export default {
name: "App",
components: { Loading },
data() {
return {
message: 'Importing',
}
}
};
</script>
我试图将一个简单的道具传递给 Vue 3.0.11 中的另一个组件,但我似乎无法让它工作。这是我的 App 组件:
<template>
<Loading :message="Importing"></Loading>
</template>
<script>
import Loading from "./components/Loading.vue";
export default {
name: "App",
components: { Loading },
};
</script>
<style>
</style>
我的 Loading
组件:
<template>
<div>{{ loadingText }}...</div>
</template>
<script>
export default {
name: "Loading",
props: ["message"],
data() {
return {
loadingText: this.message || "Loading",
};
},
};
</script>
<style scoped>
</style>
我正在尝试传递值为 Importing
的道具 message
,但在加载组件中它告诉我 message
道具未定义。这是一个 REPREX:https://codesandbox.io/s/vibrant-raman-pweb4
我做错了什么?
您正在尝试使用 v-bind:
shorthand 语法将其传递到道具中::
.
Vue 期待您传入变量 Importing
。这不存在,因此解析为未定义。
因为您的消息只是一个内联字符串,您需要远程 :
或用单引号或反引号将“Importing”括起来(如果您想进行不够复杂的字符串插值,这很有用保证计算):
<Loading message="Importing"></Loading>
或
<Loading :message="'Importing'"></Loading>
这也行得通:
<template>
<Loading :message="message"></Loading>
</template>
<script>
import Loading from "./components/Loading.vue";
export default {
name: "App",
components: { Loading },
data() {
return {
message: 'Importing',
}
}
};
</script>