🍬

Vue 2の Inject/Provide をリアクティブにする最も簡単な方法

1 min read

最も簡単な方法

Vue 2の Inject/Provide では、Provideした値をリアクティブに扱うことができません。

この問題を解決する最も簡単な方法は親コンポーネントのインスタンスをそのままProvideしてしまうことです。
その上で、子コンポーネントからvm.valueのように親コンポーネントのDataを直接参照するようにできます。
このとき参照される値はインスタンスのDataそのものなので、リアクティブな値となります。

注意する点

この方法の短所はProvideする範囲を限定できないことです。
Injectした子コンポーネントから親コンポーネントのDataの参照はおろか、Methodsを呼び出すこともできてしまいます。

Propsによるバケツリレーを省略したり、コンポーネントを毎回セットで使用したり(カルーセルの本体とスライドなど)する場合には簡潔に書けたり受け渡すPropsの修正が不要になったりと良いケースも多いですが、秩序をもって使用しないといけません。

参考

Discussion

ログインするとコメントできます