Vue 3 道具未通過

Question

我試圖將一個簡單的道具傳遞給 Vue 3.0.11 中的另一個組件，但我似乎無法讓它工作。 這是我的應用程序組件：

<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 ，但在 Loading 組件中它告訴我message道具未定義。 這是一個 REPREX： https://codesandbox.io/s/vibrant-raman-pweb4

我究竟做錯了什么？

Answer 1

您正在嘗試使用v-bind:速記語法： :將其傳遞給道具。

Vue 期望你傳入變量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>