概要
子コンポーネントで定義したメソッドを親コンポーネントから直接呼び出したい!
そうだ$refsを使おう!
Property '子コンポーネントのメソッドないしはプロパティ名' does not exist on type 'Element | Element[] | Vue | Vue[]'.
Property '子コンポーネントのメソッドないしはプロパティ名' does not exist on type 'Element'.
そんなプロパティないって言われてるやんけぇ_:(´ཀ`」 ∠):
解決策
<template>
<children-component ref="children"></children-component>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import ChildrenComponent from '@/components/organisms/ChildrenComponent.vue'
@Component({
name: 'ParentComponent',
components: {
ChildrenComponent,
}
})
export default class ParentComponent extends Vue {
$refs!: {
children: ChildrenComponent
}
// ChildrenComponentにあるfugaメソッドを直接ParentComponentで呼びたい場合
private hoge(): void {
this.$refs.children.fuga()
}
}
</script>
詳細
importした子のコンポーネントを型として呼び出せば、その子のコンポーネントにあるpublicのプロパティやメソッドは直接呼び出せる!
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
name: 'ChildrenComponent'
})
export default class ChildrenComponent extends Vue {
// アクセスできない
private murimeProperty: string
// アクセスできる
public fugaProperty: string
// できない
private murimeMethod(): void {}
// できる
public fuga(): void {}
}
</script>
余談
ちゃんと型定義すると補完で出てくるの気持ちよすですよねー
今回の場合はVueクラスの$refsをオーバーライドしてるんかな・・
もっとTypeScriptの深淵にゆきたい今日この頃