$ refがコンポーネントとして追加されたときにアクセス可能であっても、$ refsを反映しようとすると、Vueクラスコンポーネント内でインポートが見つかりませんでしたか？

Question

Vue 2.0プログレッシブウェブアプリケーションをQuasar Frameworkとしています。メニューアイテムをクリックすると、レイアウトの左のスロットに引き出しを閉じるようにしています。

これは、コンポーネントスクリプトHome.tsです：

$refs: { 
    layout: any 
}; 

：このように、

import Vue from 'vue'; 
import Component from 'vue-class-component'; 

import { 
    QIcon, 
    QLayout, 
    QList, 
    QListHeader, 
    QItem, 
    QItemMain, 
    QItemSide, 
    QToolbar, 
    QToolbarTitle, 
} from 'quasar'; 

@Component({ 
    name: 'Home', 
    components: { 
    QIcon, 
    QLayout, 
    QList, 
    QListHeader, 
    QItem, 
    QItemMain, 
    QItemSide, 
    QToolbar, 
    QToolbarTitle, 
    } 
}) 
export default class Home extends Vue { 

    $refs: { 
    layout: QLayout // Cannot find name 'QLayout' 
    }; 

    public newPainting() { 
    this.$refs.layout.toggleLeft(); 
    this.$router.push(`painting/new`); 
    } 
} 

これが原因Cannot find name 'QLayout'エラーのコンパイルされませんが、私はanyに$refs.layoutの種類を変更するとき、それは動作します

@Component()デコレータで使用されているので、なぜQLayoutが見つからないのか混乱しています。

このコンポーネント（あなたがレイアウトを骨格にクエーサー-CLIを使用する場合、ほとんどデフォルトの1から取ったあなたが得る）ためHome.vueファイルされる：

<template> 
    <q-layout ref="layout"> 
    <q-toolbar slot="header"> 
     <!-- opens drawer below--> 
     <button class="hide-on-drawer-visible" @click="$refs.layout.toggleLeft()"> 
     <q-icon name="menu"></q-icon> 
     </button> 

     <q-toolbar-title> 
     echroma 
     </q-toolbar-title> 
    </q-toolbar> 

    <!-- Left Side Panel --> 
    <div slot="left"> 
     <q-list no-border link inset-delimiter> 
     <q-list-header>Menu</q-list-header> 

     <q-item @click="newPainting()"> 
      <q-item-side icon="add_to_photos" /> 
      <q-item-main label="New Painting" sublabel="Start evolving a new painting!" /> 
     </q-item> 

     </q-list> 
    </div> 

    <router-view /> 
    </q-layout> 
</template> 

<script> 
import Home from './Home' 
    export default Home 
</script> 

<style> 
</style> 

はQLayoutはないだろう、なぜ何らかの理由がありますクラス宣言の内側からアクセスできますか？

Answer 1

おそらくQLayoutはタイプではないためです。

コードでは、インスタンス変数$refsは宣言されていますが、初期化されていません。 :の構文は、型を宣言するためのものです。

export default class Home extends Vue { 
    $refs: { 
    layout: QLayout // Cannot find name 'QLayout' 
    }; 
    // ... 
} 

おそらく初期化したいですか？

export default class Home extends Vue { 
    $refs = { 
    layout: QLayout // Affect the variable 'QLayout' to the key 'layout' 
    }; 
    // ... 
}