【Vue】componentタグの便利な使い方。変数によるtemplateの出し分けと、生HTMLの生成

vueのcomponentタグを使うとv-bindの属性:isで指定した値に合わせてtemplateを出し分けることができる。

また、文字列を直接指定（または戻り値で文字列を返す）すると、その文字列に合わせてたタグを生成することができる。

目次

1. 文字列で指定
   2. 文字列で直接指定
   3. 変数を指定し文字列を返す
2. テンプレートを指定
3. 他の属性も合わせて指定する方法

## 文字列で指定

文字列で直接指定

:isでタグ名を指定するとそのタグが生成される。

▼divタグを指定した場合

<template>
    <div>
      <component :is="'div'">
        テスト
      </component>
    </div>
</template>

**▼ブラウザの表示**

▼ポイント
重要なポイントは文字列で指定すること。そのためにはシングルクオテーションで囲む。

:is="'div'"

**▼エラーになる場合** シングルクオテーションで囲まないと**変数として認識される**。変数で指定する場合は、export default内に定義する必要がある。

:is="div"と記述してexport default内にdivの定義がない場合はエラーとなる。

[Vue warn]: Property or method "div" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

### 変数を指定し文字列を返す `:is`で変数を指定し、dataやcomputed, methodで文字列を返してもタグを指定できる。

▼変数を指定（dataでpタグを指定）

<template>
    <div>
      <component :is="assignTag">
        テスト
      </component>
    </div>
</template>

<script>
export default {
  data(){
    return{
      assignTag: "p"
    }
  }
}
</script>

## テンプレートを指定

テンプレートを指定する場合は以下３つの手順が必須。

1. テンプレートを読み込む
2. テンプレートをローカルに登録
3. 属性の値に変数を指定
4. 変数の値にケバブケースに変換したテンプレ名を指定

1. テンプレートを読み込む

例えば、同じ階層にある TmpAddColumn.vue を読み込む場合

<script>
import  TmpAddColumn from  './TmpAddColumn'
</script>

### 2. テンプレートをローカルに登録 テンプレートを読み込んだら、ローカル(vue)に登録する。

<script>
import  TmpAddColumn from  './TmpAddColumn'

export default {
  components: {
    TmpAddColumn,
  }
}
</script>

### 3. 属性の値に変数を指定 `:is`の値に変数を指定する。変数名は任意。

<template>
    <div>
      <component :is="assignTemplate">
        テスト
      </component>
    </div>
</template>

### 4. 変数の値にケバブケースに変換したテンプレ名を指定

属性で指定した値とテンプレートを紐づけるためには、テンプレート名をケバブケース（ハイフンで繋ぐ）に変換した値を属性に指定する。

<script>
import  TmpAddColumn from  './TmpAddColumn'

export default {
  components: {
    TmpAddColumn,
  },
  data(){
    return {
      assignTemplate: "tmp-add-column"
    }
  }
}
</script>

以上の処理で、
属性の値　->　dataの値 -> template　の順でつながる。

**▼ブラウザの表示**
## 他の属性も合わせて指定する方法 `:is`の他に`v-bind`を使うと他の属性を指定することができる。

widthなどを簡単に調整できる。

▼width, colspan, rowspanを追加

<template>
    <div>
      <table border="1px">
        <tr>
          <component :is="'th'" v-bind= "{width: Width,  conspan: colSpan, rowspan: rowSpan }">
            テスト
          </component>
        </tr>
      </table>
    </div>
</template>

<script>
import  TmpAddColumn from  './TmpAddColumn'

export default {
  components: {
    TmpAddColumn,
  },
  data(){
    return {
      assignTemplate: "tmp-add-column",
      Width: "50%",
      colSpan: 3,
      rowSpan: 2
    }
  }
}
</script>

HTMLに指定した属性が追加されている。

<th width="50%" conspan="3" rowspan="2">
        テスト
</th>