Vue.js
自分なりの解釈
今日学習した処理の流れ
子側のコンポーネントから親側のコンポーネントに$emitを使って値を渡す。
親側は渡された値を参考にメソッドでdataを作成。
作成後、別のコンポーネントへpropsを使用してdataを渡す。
propsで受け取ったdataを使用してコンポーネント内で表示する。
propsで受け取ったdataを正しく表示するためにナビゲーションガードという仕組みを使用する。
ナビゲーションガードとはコンポーネント間の表示を切り替える間に処理を挟み込むような仕組みで挟みこむタイミングや場所によって記述する方法が異なる。
今日使用したのはpropsで取得した値をコンポーネント内のdataに値を代入する時に、DOM更新を待ってから代入処理を実行するために使用した。
この時に使用したのがbeforeRouteEnterで引数に移動前コンポーネントの$routeを表すfromと移動先の$routeを表すtoとnextがある。
nextのコールバック関数が呼び出される。
nextの中ではインスタンス内を表すthisが使用できない。
thisの代わりにnext(vm => {})とすることでthisの代わりにvmで情報を取得できるようになる。
