日報(2020-10-24) v-bind="$attrs"

はじめに

アプリケーションでマークダウン・エディタを用意したい時は vuetify-markdown-editor がとても便利です。<Editor> だけで一通りの機能がちゃんとそろった(Code highlighting とか、Emoji とか、Math formula とか、Mermaid とか)マークダウン・エディタが使えるし、viewer モードとかもあって Editor としてだけじゃなくてビューアーとしても使えるし、まさにこれさえあれば後はなにもいらないという感じの便利さです

ただ、エディタの初期サイズが5行固定みたいだったので、「変更する方法ある?」 ってヘルプリクエストを出してみたら、「今はないけどすぐにつくるよ」 との親切な御返答を賜り、つくってくださったソリューションがカッコよくて、マークダウン・エディタが内部でつかってる v-textarea に v-bind="$attrs" を追加 するという、これだけで子コンポーネントに親からプロパティを渡せるんですね

$attrs

で、なんでこれでできるのか全然わからなかったので好奇心ギンギラでさっそくググりまくってみました。そもそも $attrs を知らななったのです

APIドキュメント を見ると、ver 2.4 から入ったインスタンスプロパティなんだそうです。3〜4年前ってかんじでしょうか。で、どういうものかというと、コンポーネントにバインドされた attribute のなかで、class でも style でもなく、props でもないものが { [key: string]: string } って形で入ってるオブジェクトにして子コンポーネントに渡されるんだそうです。

vuetify-markdown-editor みたいに、Editor コンポーネントが内部でつかってる v-textarea に、アプリケーションコードからプロパティを渡したい時とか、まさに子コンポーネントの v-textarea に v-bind="$attrs" さえ書いておけば、子コンポーネントに渡したい props をアプリケーションコードで親コンポーネントに書いておけば、親コンポーネントの props と名前がぶつかってない限り、子に渡してもらえるんですね。これは便利だけど知らなかった!

感想

これに限らず vue ってまだまだ知らないことがたくさんあるというか、v-up のたびに知らないことが増えている C++ 状態というか、暴言だけど Vue.js って所詮は Evan You のオレオレフレームワークだよね なんて思ってしまうこともしばしばございます。結構パワーワードですねこれ


Last Updated: 10/24/2020, 9:57:30 AM