🍬
Vue 2の Inject/Provide をリアクティブにする最も簡単な方法
最も簡単な方法
Vue 2の Inject/Provide では、Provideした値をリアクティブに扱うことができません。
この問題を解決する最も簡単な方法は親コンポーネントのインスタンスをそのままProvideしてしまうことです。
その上で、子コンポーネントからvm.valueのように親コンポーネントのDataを直接参照するようにできます。
このとき参照される値はインスタンスのDataそのものなので、リアクティブな値となります。
注意する点
この方法の短所はProvideする範囲を限定できないことです。
Injectした子コンポーネントから親コンポーネントのDataの参照はおろか、Methodsを呼び出すこともできてしまいます。
Propsによるバケツリレーを省略したり、コンポーネントを毎回セットで使用したり（カルーセルの本体とスライドなど）する場合には簡潔に書けたり受け渡すPropsの修正が不要になったりと良いケースも多いですが、秩序をもって使用しないといけません。
Discussion