複数の小道具をVue.jsコンポーネントに渡す

VueやReactなどのコンポーネントベースのアーキテクチャを使用するすべての開発者は、再利用可能なコンポーネントを作成するのは難しいことを知っています。ほとんどの場合、外部からのコンポーネントの制御とカスタマイズを容易にするために、多くの小道具が必要になります。 。

それは悪いことではありませんが、たくさんの小道具を渡すことは少し面倒で醜いものになる可能性があるのは事実です。 ただし、すべてのVue.jsコンポーネントスタイルがそれに対処する方法があります。

最も単純なものの1つであるvuetifyのボタンコンポーネントを例として取り上げましょう。 ほとんどの場合、同じ束の小道具を渡したいとしましょう。

<v-btn
  color='primary'
  href='https://alligator.io'
  small
  outline
  block
  ripple
>
  Hello Meat
</v-btn>

それらを別のファイルに入れるのは理にかなっているかもしれません。それをprops.jsと呼びましょう。

export const buttonProps = {
  color: 'primary',
  small: true,
  outline: true,
  block: true,
  ripple: true,
  href: 'https://alligator.io'
}

JSXおよびレンダリング機能

レンダリングに関しては、より強力で柔軟性が高いため、一度に複数の小道具を渡すのはかなり簡単です。

レンダリング関数の場合：

import { buttonProps as props } from './props.js';

export default {
  render: h => h(
    'v-btn',
    { props },
    'Hello Meat'
  )
};

そしてJSXでは：

import { buttonProps as props } from './props.js';

const data = { props }

export default {
  render: h => <v-btn {...data}>Hello Meat</v-btn>
};

Vue.jsテンプレートの使用

Vue.js DSL（またはテンプレート）を使用するのはどうですか？ 心配ありません、それも可能です。 あなたがする必要があるのは使用することだけです v-bind 指令。 で定義する必要のあるオブジェクトを指定します data コンポーネントのオプションは、すべての小道具をバインドします。

<template>
  <v-btn v-bind='buttonProps'>
    Hello Meat
  </v-btn>
</template>

<script>
  import { buttonProps } from './props.js';

  export default {
    data: () => ({ buttonProps })
  }
</script>

このトリックを使用すると、最愛のテンプレートタグを使用しながら、アプリのいくつかの場所で繰り返し小道具をテンプレートに入力する必要がなくなります。

まとめ

コンポーネントへの複数の小道具の受け渡しは、この記事で説明した例を使用して簡略化できます。 これは、多くの小道具があるプレゼンテーションおよびサードパーティのコンポーネントに特に役立ちます。

ここで使用されている例は単なる教育的なものであることに注意してください。 DRY（Do n’t Repeat Yourself）を維持したい場合は、独自のラッパーコンポーネントを作成するなど、特定のケースに応じてより適切なアプローチが考えられます。