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モジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

no image

webpackについて再履修

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。 今まで書いた既存のwe …

no image

yarnコマンド

JSやフロント側のライブラリを使うときはnpmを使ってたんですが、2〜3年前ぐらいからyarnというコマンドも使われているので、ちょっと調査を。 Contents1 yarnとは?2 よく使いそうなコ …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

アーカイブ