Vue Методы дочерних компонентов Typescript - PullRequest
Новая
       13

Vue Методы дочерних компонентов Typescript

0 голосов
/ 29 апреля 2020

Я немного поработал с Vue, но начал переходить к реализациям с Typescript. Я сталкиваюсь с проблемой, когда я не могу получить доступ к методам ребенка через ссылки на родителя.

Родительский код: 

<template>
  <ref-test ref="child"/>
</template>

<script lang="ts">
import Vue from "vue";
import RefTest from "./RefTest.vue";

export default Vue.extend({
  name: "RefParent",
  components: {
    RefTest
  },
  data: () => ({}),
  methods: {},
  mounted() {
    const child = this.$refs.child as RefTest;
    child.pingMe();
  }
});
</script>

<style scoped></style>

Дочерний код: 

<template>
  <div>REF TEST...</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "RefTest",
  data: () => ({}),
  methods: {
    pingMe() {
      console.log("refTest pingMe");
    }
  }
});
</script>

<style scoped></style>

Проблема, с которой я сталкиваюсь, заключается в том, что в родителе, когда я ссылаюсь на ребенка с const child = this.$refs.child as RefTest; Я вижу ошибку: 'RefTest' refers to a value, but is being used as a type here.. Кроме того, child.pingMe(); сообщает: Property 'pingMe' does not exist on type 'Vue'.

Я пробовал различные варианты, найденные здесь: https://github.com/vuejs/vue/issues/8406 в основном вокруг определений нижнего интерфейса и вызова Vue.extend<>.

Я ценю любую помощь, помогающую мне продолжать обдумывать различия с использованием Typescript.

1 Ответ

0 голосов
/ 29 апреля 2020

Хорошо. Сделал еще несколько экспериментов, и я не уверен, что это «правильное» решение или самое элегантное, но код работает, и компилятор не жалуется. В конечном итоге я создал тип интерфейса, который содержит метод, который я пытаюсь достичь. В родителе я теперь приведу $ ref к этому типу интерфейса, и все выглядит хорошо. Пожалуйста, дайте мне знать, если есть лучший, более элегантный способ сделать это (или это «лучший» способ). Пожалуйста, смотрите полный код ниже.

Интерфейс (types / refInterface.ts): 

import Vue from "vue";

export interface RefInterface extends Vue {
  pingMe(): void;
}

Родитель: 

<template>
  <ref-test ref="child" />
</template>

<script lang="ts">
import Vue from "vue";
import RefTest from "./RefTest.vue";
import { RefInterface } from "@/types/refInterface";

export default Vue.extend({
  name: "RefParent",
  components: {
    RefTest
  },
  data: () => ({}),
  methods: {},
  mounted() {
    const child = this.$refs.child as RefInterface;
    child.pingMe();
  }
});
</script>

<style scoped></style>

Дочерний код не изменился, чтобы он работал, поэтому не вставлял его заново.

...