はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、Vue.jsのComposition APIをscript setupへリファクタリングする方法をまとめます。

Vue.js3.2よりscript setupが導入されました。

script setup で書くことにより、より簡潔な記述ができるようになります。

既存のComposition API から、script setupへリファクタリングするにはどうしたらいいのでしょうか？

注意

script setupはvue.js3.2以上でないと動作しないので、ご注意ください。

Composition API の書き方

親子コンポーネントがあるとします。

親は、子コンポーネントを呼び、

子コンポーネントは、親コンポーネントの関数をemitするような作りとなっております。

親コンポーネント

<script>
export default {
    setup() {
        const testValue = 'test_value'
        const testFn = param => console.log('emit! ' + param);
        return {
            testValue,
            test: 'aaaa',
            testFn,
        }
    }
}
</script>

<template>
    <ScriptSetupChild :prop_id="1" @emitTest="testFn"></ScriptSetupChild >
</template>

子コンポーネント

<script>
export default {
    props: {
        prop_id: {
            type: Number,
        }
    },
    emits: ['emitTest'],
    setup(props, context) {
        console.log(props.prop_id)
        context.emit('emitTest', 'param1');
    }
}
</script>

<template>
    this is composition component
</template>

script setupへリファクタリングする(親コンポーネント編)

まずは、親コンポーネントをリファクタリングしましょう。

やることは以下になります。

1.scriptタグの属性にsetupを追加

2.export defaultはコメントアウトする

3.setupもコメントアウトする

4.setup()のreturnは、コメントアウトする

5.ただし、returnのオブジェクトで定義している値は、const定数として逃がす

<!-- 1.scriptタグの属性にsetupを追加 -->
<script setup>
// 2.export defaultはコメントアウトする
// export default {
// 3.setupもコメントアウトする
//     setup() {
        const testValue = 'test_value'
        const testFn = param => console.log('emit! ' + param);
        // 4.setup()のreturnは、コメントアウトする
        // return {
            // testValue,
            // 5.ただし、returnのオブジェクトで定義している値は、const定数として逃がす
            const test = 'aaaa'
            // testFn,
    //     }
    // }
// }
</script>

<template>
    <ScriptSetupChild :prop_id="1" @emitTest="testFn"></ScriptSetupChild >
</template>

清書するとこのうなります。すっきりしましたね。

export defaultとsetup関数を消すと、こんなにもスッキリするんですね。

<script setup>
const testValue = 'test_value'
const testFn = param => console.log('emit! ' + param);
const test = 'aaaa'
</script>

<template>
    <ScriptSetupChild :prop_id="1" @emitTest="testFn"></ScriptSetupChild >
</template>

script setupへリファクタリングする(子コンポーネント編)

続いて、子コンポーネントのリファクタリングです。

scriptタグへ、setup属性を付与したり、ecport defaultのsetup関数を削除することは省略します。

1.propsは、definePropsへリファクタリングする(importは不要)

2.emit定義は、defineEmitsへリファクタリングする

3.emitの実行は、contextではなく、defineEmitsの返り値から実行する

4.コンポーネントのprops取得は、definePropsの返り値から実行する

<script setup>
// 1.propsは、definePropsへリファクタリングする(importは不要)
const props = defineProps({
    prop_id: Number
})
// 2.emit定義は、defineEmitsへリファクタリングする
const emit = defineEmits(['emitTest'])

// 3.emitの実行は、contextではなく、defineEmitsの返り値から実行する
emit('emitTest','param1')

// 4.コンポーネントのprops取得は、definePropsの返り値から実行する
console.log(props.prop_id)
</script>

<template>
    this is child component
</template>

まとめ

いかがでしたでしょうか。

script setupで書くと、とてもスッキリしますね。

可能なことなら、script setupで書いていきたいですね！

果たして、export defaultは何のためにあったのやら・・・

皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

プログラマーノート

プログラマーの学習や雑記のメモです

【Vue.js】Composition APIをscript setupへリファクタリングする