Vue.js 奮闘中（20年2月10日）

時間が空いてしまったけれど、何もしていないわけではない。
引き続き Vue.js による開発を続けている。

先月、React を用いて開発したときよりも、Vue.js の方が、（私的には）非常にわかりやすい。とくに親コンポーネントと子コンポーネントとのデータのやりとりが、ReactよりVue.jsの方が、後からコードを読んだときにわかりやすい気がする。（長い時間をかけてコーディングをすれば、そうでもないのだろう。）

現在、直面している問題として、Vue.jsによる親コンポーネントから子コンポーネントの関数の呼び出しである。結果としては「動いている」のだけれど、「ターミナル上ではエラー」が出ている。

30:20 Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
  Property 'addTrack' does not exist on type 'Element'.
    28 |     // Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
    29 |     // Property 'addTrack' does not exist on type 'Element'.
  > 30 |     this.$refs.tvc.addTrack()
       |                    ^

Propsでは値を受け渡すだけで、関数を呼び出せないみたいだし、公式ドキュメントによると、refもあまり推奨されていないらしい。

「addTrack」という関数をもっていると、どこかに明示する必要があるのか、ググってもいまいちわからない。

Vuexを使うほどでもない。

諦めかけていたところ、暁光。

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

TypeScriptの記述の問題らしい。
$refs がもともと定義されていないから起こったのかな？

  $refs!:{
    tvc: HNTrackViewController
  }

こんな感じでしっかりと明示してやると、無事動きました。めでたし。
（refで参照したりと、やってることは、Reactとあまり変わらんかもしれんね。）

2）vue.js + typescript = vue.ts ことはじめ

ついでに、 $emit の記述を 2) を参考に修正。import に Emit を含めるのを忘れずに。

  @Emit('add-track')
  public addTrackToApp() {
    //this.$emit('add-track')←元のコード
    return
  }

将来的に、DB使ったり非同期処理使ったりしたいなら、Angularを選択した方が良いのかなとも思ったのですが、とりあえず、Vue.jsで開発を続けます。

---