Vue3のComposition APIをつかって既存のVueコンポーネントを書き換えてみた(第2回)

Vue3のComposition APIに沿ったコンポーネントの書き方を初めてから以下の記事↓を書きましたが、この時使わなかったpropsとemitについて、Composition APIを使って書く機会があったのでやり方をまとめました。

propsの使い方

前回では、紹介できませんでしたが、Propsの受け渡しも少しだけかわります。
propsの宣言の仕方は、今までと同じ以下のようになります。

props: {
  latLngs: Array,
},

propsのtemplate内での使い方も今までとおなじ。props内で宣言した変数にそのままアクセスできます。

<th v-for="(item, index) in latLngs" :key="index">

違いは、propsにsetup()内でアクセスするときです。

setup(props) {    
    const numOfLatLngs = computed(() => {
      return props.latLngs.length;
    });

のように、setup()関数がpropsを引数に取るようにします。そして、setup()関数の中でpropsの中の変数（このケースではlagLngs）にアクセスします。

emitの使い方

propsに続いて、emitも若干書き方を変える必要があります。
Vue2までは以下のような書き方をしていたと思いますが、

    closePopup() {
      this.$emit('popup_closed');
    },

Vue3のComposition APIでは、下のように書き換えます。

    const closePopup = () => {      
      context.emit('popup_closed');
    };

ここで、`context`という変数が登場します。これは、setup()関数の引数として渡されます。

 setup(props, context) {

このcontextにemit関数が入っているのでこれをよびだします。

 setup(props, context) {
   

    const closePopup = () => {      
      context.emit('popup_closed');
    };
}

ここで、もしsetup()の中でpropsを使わない場合は、このように書いてください

setup(_, context) {

次のように書くとcontextを正しくsetup()関数内で取得できずエラーになるので注意してください。

// これはNG
setup(context) {

続く↓↓↓

追記

Vue3.2から<script>タグを<script setup>とすることで宣言的に完結にVue3のComposition APIに即したコンポーネントが書けるようになりました↓↓↓

このブログに関する質問やWebアプリ、iOS・Androidアプリの開発の相談はこちらから↓↓↓

@mizutory
mizutori@goldrushcomputing.com

Goldrush Computing