[Vue] 単一コンポーネントのソースを再利用する

Nuxt.jsのネストされたルートを使う時など、一部パラメータだけ変えてコンポーネントのscriptを再利用したい時があったりする。

普通にVue.jsの単一ファイルコンポーネント作るとtemplateやscriptのタグの中にソースを書いていくけど、

<template>
  <div class="component">
    Vueコンポーネント({{ type }}のすがた)
  </div>
</template>

<script>
export default {
  data() {
    return {
       type: 'default'
    }
  },
  mounted() {
     swtich(this.type) {
        // type 別になんかする
     }
  }
}
</script>

これは全て外部ファイルへの参照に置き換えることができる

<template src="./component.html" />

<script>
import script from './script.js';
export default script;
</script>

テンプレートもスクリプトも外部ファイルには中身をそのまま移せば良い。

// script.js
export default {
  data() {
    return {
       type: 'default'
    }
  },
  mounted() {
     swtich(this.type) {
        // type 別になんかする
     }
  }
}

スクリプトはオブジェクトを生成する関数に変えて、

// script.js

export function create(type = 'default') {
  return {
    mounted() {
       swtich(type) {
          // type 別になんかする
       }
    }
  }
}

関数に渡す引数によって挙動を変えるといったことができる。

// index.vue
<template src="./component.html" />

<script>
import { create } from './script.js';
const script = create('default');
script.name = 'IndexPage';
export default script;
</script>
// cat.vue
<template src="./component.html" />

<script>
import { create } from './script.js';
const script = create('cat');
script.name = 'CatPage';
export default script;
</script>

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください