skillup

技術ブログ

JavaScript

vueでのコンポーネント間の変数のやりとりに関して

投稿日:

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。

個人的には下記のような解釈で組んでおります。

vuex

個人的にはグローバル変数的に使いたい変数をこれで管理します。主にDBに保存、取り出しをしたり、マスター系の変数などの管理がこちらになるかと思います。

sync、props、emit

主にパーツ化されたコンポーネント間のデータ受け渡しで使います。

代表的なところでいうと、select,radio,checkboxなどをパーツ化しておき、親で変数を受け渡して、子で実際の処理をするときなどに、これらのデータのやりとりをします。

this.$parent.〜

基本的には上記の2パターンでなんとかなると思いますが、 syncpropsemit を使っても、稀に親の変数が子に反映されない(反映が遅い)ときなどがあります。こういったときはsetを使うとよいはずなのですが、調査不足でまだ解消できてはいません。

その時に場当たりな的な解決策ではあるのですが、参照のみで、親(あるいは子)の変数を使いたい時にthis.$parent.〜を使います。実際はコンポーネント間で依存関係ができてしまうため、アンチパターンに近いそうですので、乱用は控えた方がいいかもしれません。

実際のサンプル

https://github.com/umanari145/laravel-vue

-JavaScript
-,

執筆者:


  1. […] コンポーネント間の連携に関してはこちらの記事でも書き、ソースを色々とみてなんとかわかりかけてきたのですが、値が反映されないのには悩みました。 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

vue-routerと認証など

vue-routerで簡単な認証に関する処理など。 例によって https://github.com/umanari145/admin_tool を題材に。 Contents1 サーバーサイドとのルー …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …

アーカイブ