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

はじめに

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

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

$attrs

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

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

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

感想

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

---