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>