【Vue.js】一部オプションを指定済のコンポーネント作成

例えば、Vuetifyによるボタンのスタイルを、メインの動線（OKなど）とそれ以外（キャンセルなど）で別々にしたいとき、次のようなコードを至るところに入れ込むことになってしまう。

<!-- メイン動線のボタン：背景色と波紋色を指定 -->
<v-btn color="primary" :ripple="{ class: 'cyan--text text--lighten-1' }">OK</v-btn>

これでは見通しが悪い上、後からスタイルを変更するのも大変である。

解決策

コンポーネントの一部オプションを書き換えて描画をおこなう関数型コンポーネントを作成する。

MainBtn.vue

<script>
export default {
  name: 'MainBtn',
  functional: true,
  render(h, { data, children }) {
    data.props = Object.assign({
      color: 'primary',
      ripple: { class: 'cyan--text text--lighten-1' }
    }, data.props || {});

    return h('v-btn', data, children);
  },
};
</script>

使い方

登録すればテンプレートなどに記述できる。

<main-btn>スタイルを変更したボタン</main-btn>
<v-btn>そのままのボタン</v-btn>

propsやeventsもそのまま使うことができる。

<main-btn @click="onClickOk" elevation="24">OK</main-btn>
<v-btn @click="onClickCancel" elevation="24">CANCEL</v-btn>