NativeScript Vue 无法导入组件答案

【问题标题】：NativeScript Vue cannot import componentNativeScript Vue 无法导入组件
【发布时间】：2020-07-29 00:53:07
【问题描述】：

我刚开始使用 NativeScript 并尝试使用它构建我的第一个程序。我正在尝试将标头组件导入我的主应用程序。当我运行我的 ios 模拟器时，我看不到标题。

我有我的 App 组件：

<template>
  <Page>
    <Header :numCorrect="numCorrect" :numTotal="numTotal" />
    <GridLayout columns="*" rows="*">
      <Label class="message" :text="msg" col="0" row="0" />
    </GridLayout>
  </Page>
</template>

<script >
import Header from "./Header.vue";

export default {
  components: {
    Header
  },
  data() {
    return {
      msg: "click me",
      questions: [],
      index: 0,
      numCorrect: 0,
      numTotal: 0
    };
  }
};
</script>

<style scoped>
.message {
  vertical-align: center;
  text-align: center;
  font-size: 20;
  color: #333333;
}
</style>

和我的 Header 组件：

<template>
  <StackLayout class="nav" orientation="vertical">
    <span class="title">Quiz App</span>
    <span class="title">Counter : 0/0</span>
  </StackLayout>
</template>

<script>
export default {
  name: "Header",
  props: ["numCorrect", "numTotal"]
};
</script>

<style scoped>
nav {
  background-color: red;
  color: #ffffff;
}
</style>

我觉得我已经尝试了一切来显示标题，但仍然没有运气。我错过了一些明显的东西吗？对 NativeScript 来说还是很陌生。

【问题讨论】：

标签： javascript vue.js nativescript-vue

【解决方案1】：

欢迎来到 nativescript-vue 社区。您的 Header 组件不包含要显示的有效 nativescript 元素。用<Label> 标签替换你的<span> 标签：

<template>
  <StackLayout class="nav" orientation="vertical">
    <Label text="Quiz App" />
    <Label text="Counter : 0/0" />
  </StackLayout>
</template>

如果要在计数器中包含道具，可以执行以下操作：

<template>
  <StackLayout class="nav" orientation="vertical">
    <Label text="Quiz App" />
    <Label :text="`Counter : ${numCorrect}/${numTotal}`" />
  </StackLayout>
</template>

【讨论】：