Vue.js>Vue.jsでコンポーネントの基礎を整理します

Vue.jsでコンポーネントの基礎を整理します

2018年9月2日

Vue.jsを勉強していますが、ちょっとコンポーネントの部分で躓いたので、整理もかねてメモを残します。今回はコンポーネントを定義して、そっから定義元であるメソッドを呼び出すという処理を行います。引数の受け渡しも同時に整理していきます

 

まずはこんなjsを用意しました。

次にHTMLファイルを書きます。とりあえずこのlistsを全て表示します

  • 1=Vue.js
  • 2=WordPress
  • 3=Laravel

v-forで回してあげればお約束通りの結果になります。
さて次はコンポーネントを使っていきたいので、li要素をコンポーネント化しました。

こうすると

  • ここに表示したい

とだけ表示されます。
このコンポーネントで先ほどのlistsの内容を表示させたいんですが、、、、
そんな時にpropsを使います

というわけでjsはこんな感じになりました。これならば、最初と同様にリストの中身を表示できそうな雰囲気が出ています。
というわけでHTMLファイルを書き換えます

こうすると

  • 1Vue.js
  • 2WordPress
  • 3Laravel

こんな感じで最初と同じように表示されています。
このv-bind:keyってのはよくわからんですが、forで回すときは一意のキーを設定してあげるのが鉄則らしいのでこんな感じにしています。

v-bind:listで先ほど指定したpropsに値を渡しています。

次に親だかなんだかよくわからんけど、そっちに定義してあるメソッドを呼び出します

今回呼び出したいメソッドはhogeです

というわけでコンポーネントに直接書いてみますがエラーを吐きます。hogeなんか見つからないよってエラーです。

ちょっと遠回りかもしれませんがコンポーネントのほうにメソッドを定義してみます。

これで呼び出す!をクリックするとコンポーネントのcallHogeが呼び出されるので。call hoge!とアラートがなります。

次に親だかなんだかのメソッドを呼び出します。

$emitを使います。
htmlでは

hogeメソッドを呼び出すようにします。こうするとhogeメソッドが呼び出されますので
alert(“call!!!”);とアラートが表示されます。

引数を渡す

とりあえずlistを引数で渡して、それを表示させるという動きでやってみます。

引数を受け取るために親だかなんだかのhogeメソッドに引数にlistを指定します。
ついでにlist.titleをアラートで表示させるようにしました

コンポーネントはこんな感じになります

メソッドで引数を受け取るようにしたら、$emitの第二引数で渡します。
最後にhtmlでも引数を渡すようにすれば終わりです。

これで押したliのtitleが表示されるようになりました!

一旦整理したいのでここまで・・・