はじめに

つい先日、テキストを表示する為のコンポーネントを作ろうと思ってたんですよね。
それで、propsでis-inlineとかを渡してコンポーネントにdisplay: inline;でも渡せば良いやと思ってたんですけど、この場合仮に<p>でコンポーネントを作るとしたらブロック要素でもインライン要素でもどっちも<p>になっちゃうんですよね。

これめっちゃ気持ち悪くないですか？

それでタイトルです。

<compnent is="タグ名">で解決

Vueには<compnent>なるものが用意されていて、そのis属性にタグ名を設定してあげることでそのタグになります。

以下、コンポーネントの実装例

<template>
  <compnent :is="tagName">
    <slot />
  </compnent>
</template>

<script>
export default {
  props: {
    inline: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tagName: this.inline ? 'span' : 'p',
    }
  },
}
</script>

以下、コンポーネント呼び出し元の実装例

<template>

  // <p>
  <v-atm-text>{{ text }}</v-atm-text>
  
  // <span>
  <v-atm-text is-inline>{{ text }}</v-atm-text>
  
</template>

さいごに

propsで直接'p'やら'span'やらを指定するやり方もネット上にはありましたが、それだと呼び出し元から自由にタグを変更できるようになってしまうのであんまり良くないですよね。

今までこんなやり方を知らなかったので、これでさらにコンポーネントの作成が捗りそうです。

フロントエンドって本当に楽しい！

それでは今回はこのへんで。ではでは。