18
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt(Vue) + TypeScriptでの$refsの参照エラー

Last updated at Posted at 2019-09-17

概要

子コンポーネントで定義したメソッドを親コンポーネントから直接呼び出したい!
そうだ$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の深淵にゆきたい今日この頃

18
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?