Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

FunctionalComponentの使い所を調べた件

 FunctionalComponentの使い所を調べた件

VuejsOsaka#1にてLT発表した際の資料です。タイトル通りFunctionalComponentの使い所を調べました。以上です。

morimorikochan

May 24, 2019
Tweet

More Decks by morimorikochan

Other Decks in Technology

Transcript

  1. • 名前 ◦ morifuji ◦ twitter : @marooon88 • 仕事

    ◦ PHP/Nodejs サーバーサイドエンジニア • 趣味 ◦ kotlin ◦ switchのゲーム ▪ スマブラ ▪ cuphead 誰?
  2. <script> export default { functional: true, props: { url: {

    type: String, default: null } }, render(createElement, { props, listeners, slots }) { // ごにょごにょ return createElement( "div", [slots().default] ); } }; <template functional> <b-button variant="outline-primary" pill v-bind="data.attrs" v-on="listeners" ><slot></slot ></b-button> </template>
  3. <script> export default { functional: true, props: { url: {

    type: String, default: null } }, render(createElement, { props, listeners, slots }) { // ごにょごにょ return createElement( "div", [slots().default] ); } }; <template functional> <b-button variant="outline-primary" pill v-bind="data.attrs" v-on="listeners" ><slot></slot ></b-button> </template>
  4. 何が嬉しい? • 動的にタグを変えたい 例えば propsにurlが存在する場合はaタグで表示したい propsにurlが存在しない場合はaタグなしで表示したい <template> <div> <a :href="url"

    v-if="!!url"> <slot></slot> </a> <div v-else> <slot></slot> </div> </div> </template> <script> export default { props: { url: { type: String, default: null } } }; </script>
  5. 何が嬉しい? <script> export default { functional: true, props: { url:

    { type: String, default: null } }, render(createElement, { props, listeners, slots }) { if (props.url !== null) { return createElement( "a", { attrs: { href: props.url } }, [slots().default] ); } return createElement("div", [slots().default]); } }; • 動的にタグを変えたい 例えば propsにurlが存在する場合はaタグで表示したい propsにurlが存在しない場合はaタグなしで表示したい render()内でcreateElement()を呼び出し 動的にElementを自由自在に生成 しかもprops/data/childElementも自由自在
  6. 何が嬉しい? • 表示するためだけのコンポーネントを 高速・大量に作りたい 例えば tableタグの各Rowを大量に表示したい 各Rowを FunctionalComponent にするこ とで高速に描画できる

    体感だと1.7倍 <template > <tr> <td>{{ props.num }}</td> <td> <a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C." >Leicester City </a > <strong>(C)</strong> </td> <td>+32</td> <td>81</td> </tr> </template > <script> export default { props: { num: { type: Number, default: null } } }; </script>
  7. 何が嬉しい? • 既存コンポーネントをWrapしたいとき 例えば Bootstrap-vueのb-button(ボタン)を、プロジェクト内でアウトライ ン化・丸型化した状態でオリジナルのコンポーネントとして定義し たい。 <template > <b-button

    variant="outline-primary" pill :active="active" :block="block" :size="size" @click="onClick"> <slot></slot> </b-button > </template > <script> export default { props: { active: { type: Boolean, default: false }, block: { type: Boolean, default: false }, size: { type: String, default: null } // 使われる可能性のある propsを全て付与しなければならない }, methods: { onClick(e) { this.$emit("click", e); } }