Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

yotahada-nus3
うえぶえんじにあ 最近はzennに書いてます https://zenn.dev/nus3
so-tech
SO Technologiesは、日本全国の中小企業向けに最適な、テクノロジーを駆使したサービスを提供します。店舗集客、人材育成、Web広告の統合管理や運用代行の支援など。
https://www.so-tech.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away