NativeScript Vue无法导入组件

Question

我是使用 NativeScript 并尝试用它构建我的第一个程序的新手。 我正在尝试将 header 组件导入我的主应用程序。 当我运行我的 ios 仿真器时，我看不到 header。

我有我的应用程序组件：

<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>

我觉得我已经尝试了一切来显示 header 但仍然没有运气。 我错过了一些明显的东西吗？ 对 NativeScript 来说还是非常新的。

Answer 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>