Vue 3 道具未通过

Question

我试图将一个简单的道具传递给 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

我做错了什么？

Answer 1

您正在尝试使用 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 道具未通过

Vue 3 prop not being passed

vue.js

vuejs3

prop

vue-props