javascript - Hvordan man sender props fra en overordnet til en underordnet komponent i Vue3JS med typescript

det er første gang, jeg bruger VueJS, og vi laver et projekt i klassen ved hjælp af TypeScript. Jeg har brug for at overføre egenskaberne af variablen tabsData fra forælderkomponenten (viewet) til barnet (viewkomponenten). Jeg giver dig koden:

<script setup lang="ts">
//import { reactive, ref, computed } from "vue";
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/translate";
import Button from "primevue/button";
import type { IntArgumentListData } from "./types/IntArgumentListData";

const tabsData: IntArgumentListData[] = [
  {
    title: "Argumento 1",
    content: "texto1",
  },
  {
    title: "Argumento 2",
    content: "texto2",
  },
  {
    title: "Argumento 3",
    content: "texto3",
  },
  {
    title: "Argumento 4",
    content: "texto4",
  },
  {
    title: "Argumento 5",
    content: "texto5",
  },
];

const handleRedirect = () => {
  alert("Aceptando!");
};
</script>

<template>
  <br />
  <h1>Argumentarios</h1>
  <div class="">
    <ArgumentTabComponent> {{ tabsData }}</ArgumentTabComponent>
    <hr />
    <Button :label="$t('common.accept')" @click="handleRedirect" />
  </div>
</template>

Jeg har søgt meget på internettet og YouTube, men alle bruger export default {}, men med TypeScript kan jeg ikke gøre det. Det, jeg har prøvet, er at overføre egenskaberne, som jeg viser dig:

<script setup lang="ts">
import TabView from "primevue/tabview";
import TabPanel from "primevue/tabpanel";

// Lib imports
//import { ref } from "vue";
import type { IntArgumentListData } from "../types/IntArgumentListData";

// Properties
const props = defineProps<{
  title: IntArgumentListData;
  content: IntArgumentListData;
}>();
</script>

<template>
  <br />
  <div class="">
    <TabView>
      <TabPanel v-for="tab in props" :key="tab.title" :header="tab.title">
        <p>{{ tab.content }}</p>
      </TabPanel>
    </TabView>
  </div>
  <br />
</template>

Men når jeg bruger denne måde, får jeg en mærkelig fejl i forælderkomponenten:

fejl i overordnet komponent

Så jeg er ret fortabt. Jeg har brugt mange timer på at prøve ting og tænke over det, men jeg forstår ikke, hvad jeg gør forkert. Tak til jer alle

Beskedfejl på engelsk:

Typen '{ tabData: IntArgumentListData[]; "tab data": IntArgumentListData[]; }' kan ikke tildeles typen 'IntrinsicAttributes & Partial<{}> & Omit>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'. Egenskaben "tabsData" mangler i typen '{ tabData: IntArgumentListData[]; "tab-data": IntArgumentListData[]; }', men er påkrævet i typen 'Omit>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.ts(2322)

Svar #1

Du definerede dine props som følger:

const props = defineProps<{
  title: IntArgumentListData;
  content: IntArgumentListData;
}>();

Hvilket betyder, at du opretter to props, en kaldet title med en type af IntArgumentListData og en kaldet content med en type af IntArgumentListData.

I din type-definition IntArgumentListData har du allerede defineret title og content

Så det, du formodentlig vil gøre, er noget i den stil:

const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();

Og i din komponent behøver du kun at løbe gennem tabsData.

BEMÆRK: Når du bruger defineProps, vil props være tilgængelige i skabelonen uden at bruge props.tabsData; selvom du i script-opsætningen skal tilgå det med props.tabsData :

 <TabPanel v-for="tab in tabsData" :key="tab.title" :header="tab.title">

Denne prop vil derefter blive eksponeret på komponenten, når den bruges i forælderen. Der skal du binde dataene til proppen ved kald af komponenten.

 <ArgumentTabComponent :tab-data="tabsData" />

Hjælpsomme dokumentationslinks:

  • deklarering af props i dybden

Kan du give en engelsk oversættelse af fejlen?

Det burde resultere i noget som dette:

<script setup lang="ts">
//import { reactive, ref, computed } from "vue";
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/translate";
import Button from "primevue/button";
import type { IntArgumentListData } from "./types/IntArgumentListData";

const tabsData: IntArgumentListData[] = [
  {
    title: "Argumento 1",
    content: "texto1",
  },
  {
    title: "Argumento 2",
    content: "texto2",
  },
  {
    title: "Argumento 3",
    content: "texto3",
  },
  {
    title: "Argumento 4",
    content: "texto4",
  },
  {
    title: "Argumento 5",
    content: "texto5",
  },
];

const handleRedirect = () => {
  alert("Aceptando!");
};
</script>

<template>
  <br />
  <h1>Argumentarios</h1>
  <div class="">
    <ArgumentTabComponent :tabs-data="tabsData" />
    <hr />
    <Button :label="$t('common.accept')" @click="handleRedirect" />
  </div>
</template>

Barn :

<script setup lang="ts">
import TabView from "primevue/tabview.vue";
import TabPanel from "primevue/tabpanel.vue";

// Lib imports
//import { ref } from "vue";
import type { IntArgumentListData } from "../types/IntArgumentListData";

// Properties
const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();
</script>

<template>
  <br />
  <div class="">
    <TabView>
      <TabPanel v-for="tab in tabsData" :key="tab.title" :header="tab.title">
        <p>{{ tab.content }}</p>
      </TabPanel>
    </TabView>
  </div>
  <br />
</template>

Relaterede artikler