Vue.js 動的コンポーネントの実現 | 全国個人事業主支援協会

COLUMN コラム

Vue.js 動的コンポーネントの実現

2020年09月23日
Vue.js 動的コンポーネントの実現
- プログラマー

Vue.jsを触る中での覚え書きになります。

先ず、単一コンポーネントとして下記コンポーネントがあるとします。

TextBox.vue

<template>
  <div class="uk-margin-top uk-margin-left">
    <textarea rows=5 v-model="text" @keydown="countTextLength" @keyup="countTextLength"></textarea>
    <span>{{ length }}文字</span>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      length: 0,
      text: ''
    }
  },
  methods: {
    countTextLength: function () {
      this.length = this.text.length;
    }
  }
}
</script>

上で作成したTextBox.vueをマウントするScreenA.vueを作成します。

templateタグ内にcomponent要素を定義して:isで使用するコンポーネント名をバインドします。

このようにする事で、コンポーネントを動的に適用する事ができます。

例えば、外部からの要求によって表示するパーツを切り替える場合は、コンポーネント名を任意に変更する事で動的に切り替えが出来るのです。

<template>
  <component v-bind:is="componentName"></component>
</template>

<script>
import TextBox from 'TextBox.vue'

export default {
  components: {
     TextBox // 使うコンポーネントを登録する
  },
  created: function() {
     return {
        componentName: ''
     }
  },
  mounted: function() {
     componentName: "TextBox"
  }
}
</script>

動的にパーツが切り替わる画面設計において、動的コンポーネントの利用は使えると思います。