Vue.js勉強記録その23 Vue3を更にパワーアップしよう 5-1 ver2
こちらの書籍でvue.jsの勉強をしています。
内容をログの代わりに書いています。
今回は、Composition APIのメソッドについてと、setupに渡される引数である、contextについてと、Composition APIについてのまとめです。
■Composition APIを使おう
・メソッドの使い方
従来の記述でコンポーネントを書いた時の、methodsは使わず、setup内で変数に関数を代入する形で使う。
HelloWorld.vue
<template>
<div class="alert alert-primary">
<h1>{{ title }}</h1>
<p>{{ data.msg }}</p>
<div>
<input type="number" v-model="data.num" min="0" class="form-control" />
</div>
<button class="btn btn-primary m-3" v-on:click="action">Click</button>
</div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
props: {
title: String,
},
setup(props) {
const data = reactive({
msg: "This is reactive-value!",
num: 0,
});
const action = () => {
let total = 0;
for (let i = 0; i <= data.num; i++) {
total += i;
}
data.msg = "total: " + total;
};
return {
data,
action,
};
},
};
</script>setupの中に、以下の記述がある。
const action = () => {
let total = 0;
for (let i = 0; i <= data.num; i++) {
total += i;
}
data.msg = "total: " + total;
};この部分で、変数action（constなので定数）にアロー関数の形で関数を入れている。
関数の内容は、data.numの数まで足し算した結果を、data.msgに入れている。
data.numとdata.msgは、同じくsetup内の、
const data = reactive({
msg: "This is reactive-value!",
num: 0,
});この記述で定義されている。
ボタンを押すと、actionメソッドが走る様になっている。
data.numは、v-model="data.num"でinputと紐づいている。
ブラウザで見るとこんな感じ。画像の例の場合、10までの数を0から足して、結果が55と表示されている。
・setupのcontextについて
propsと同様に、setupにはcontextという引数も渡されている。
contextは、コンポーネントに関する情報をオブジェクトで持っている。
以下が一例。
attrs・・・・コンポーネントタグに用意された属性をまとめたもの
slots・・・・コンポーネント内に含まれるスロットをまとめたもの
emit・・・・emitされた内容をまとめたもの
例えば、attrsを使えば、propsで設定していない属性値を子コンポーネント側で取得できる。
HelloWorld.vue
<template>
<div class="alert alert-primary">
<h1>{{ title }}</h1>
<p class="mt-3 h5">{{ data.msg }}</p>
</div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
props: {
title: String,
},
setup(props, context) {
const data = reactive({
msg: "This is reactive-value!",
});
data.msg = context.attrs["msg"].toUpperCase();
return {
data,
};
},
};
</script>propsでは、titleしか定義していないが、
data.msg = context.attrs["msg"].toUpperCase();
この記述で、msgを取得しようとしている。
App.vue
<template>
<HelloWorld title="Composition API" msg="This is Composition API sample." />
</template>親側で、msgに属性値を入れると、
普通に表示される。
こちらの方法は、筆者の方はあまりお勧めではないらしいw
同じことをやるなら素直にpropsを使った方がわかりやすいとの事。確かに、必要な（設定できる）属性が、propsを見れば一目で判る状態の方がコードが読みやすいですね。
■Composition APIのまとめ
vue3になり、Composition APIを使ったコンポーネントの作成ができる様になった。
なぜCompositon APIで書ける様にしたかというと、従来の方法だと、複雑なコンポーネントになると、色々な情報が雑多に散らばってしまうから。
なので、propsとsetupしかないシンプルな記述であるComposition APIが生まれた。
ちなみに、Composition APIは、従来の書き方とある程度の互換性があり、methodsやcomputedも同時に書くことができる。
export default{
props:{内容},
setup(props,context){内容},
computed:{内容},
methods:{内容}
}こんな感じにpropsとsetupの続きに、computedやmethodsが書ける。
なので、少しずつ従来の書き方からComposition APIに移行するのがお勧めとの事。
■（この記事の）まとめ
今回は、Composition APIでメソッドを使う方法と、setupに渡されるcontextについてでした。
また、CompositionAPIに関するまとめもありました。
基本的には、従来の方法よりはComposition APIの方がシンプルに書けるからお勧めとの事だが、僕はvue3から勉強を始めているので、従来の方法の問題点がなかなかピンとこないですねw
まぁ今回みたいに、ある技術を途中から学ぶと、あるあるの疑問点ですね。ひとまず、筆者の言うことを信じて、なるべくComposition APIで、無理なら従来の方法で書いてみようと思います。