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

jQueryの書き方について

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

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

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

vue-routerについて

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

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …