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
-,

執筆者:


comment

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

関連記事

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 が、私の場合、設定が面倒だったり、Chromeではトランスパイルしなくて …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

AngularJSでのDB接続

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