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

by

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="component">
    Vueコンポーネント（{{ type }}のすがた）
  </div>
</template>
 
<script>
export default {
  data() {
    return {
       type: 'default'
    }
  },
  mounted() {
     swtich(this.type) {
        // type 別になんかする
     }
  }
}
</script>

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

1
2
3
4
5
6
<template src="./component.html" />
 
<script>
import script from './script.js';
export default script;
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// script.js
export default {
  data() {
    return {
       type: 'default'
    }
  },
  mounted() {
     swtich(this.type) {
        // type 別になんかする
     }
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
// script.js
 
export function create(type = 'default') {
  return {
    mounted() {
       swtich(type) {
          // type 別になんかする
       }
    }
  }
}

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

1
2
3
4
5
6
7
8
9
// index.vue
<template src="./component.html" />
 
<script>
import { create } from './script.js';
const script = create('default');
script.name = 'IndexPage';
export default script;
</script>
1
2
3
4
5
6
7
8
9
// cat.vue
<template src="./component.html" />
 
<script>
import { create } from './script.js';
const script = create('cat');
script.name = 'CatPage';
export default script;
</script>

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.