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

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

jQueryの書き方について

jQueryの書き方は一般的に以下のように書きます。

上記の処理ですが、細かく書くとDOMが構築されてから実行という意味が含まれていま …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …