Zenn
Open2

Vue3 のちょっとしたTIPS

Vue 3
props
refs
超Ｌチカ団編集局超Ｌチカ団編集局

Vue3 で props を使って callback するより component events を使ったほうがいいという話

props を使って子コンポーネントからコールバックさせたくなることってありますよね。

parent.vue
<template>
  <ChildComponent :hoge="callbackfunc"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
    components: { ChildComponent },
    methods: {
        callbackfunc(){
            ....
        }
    }
}
</script>
ChildComponent.vue
<template>
    <v-btn @click="clickButton">Click!</v-btn>
</template>
<script>
export default {
    props: {
        hoge: {}
    },
    methods: {
        clickButton(){
            this.hoge();
        }
     }
}
</script>

でも、こんなことをするのなら、Component Events を使って下記のようにしたほうが良いよという話。

parent.vue
<template>
  <ChildComponent @hoge="callbackfunc"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
    components: { ChildComponent },
    methods: {
        callbackfunc(){
            ....
        }
    }
}
</script>
ChildComponent.vue
<template>
    <v-btn @click="clickButton">Click!</v-btn>
</template>
<script>
export default {
    methods: {
        clickButton(){
            this.$emit('hoge');
        }
     }
}
</script>

props に書くと、渡すべき変数の内容が関数でなければならないことが分かりにくく、バグの原因になるからということのようです。子コンポーネントが複数の違う親とかから呼び出されたら、確かによくわからなくなりそうですよね。

引数も this.$emit('hoge',100) みたいに渡せます。

Composition API の場合とか、詳しいことは下記をみてね！

超Ｌチカ団編集局超Ｌチカ団編集局

Vue3 で要素を参照する (ref)

this.$refs で参照できる。

<template>
  <audio src="hoge.mp3" ref="hoge"></audio>
  <button @click="play">Play</button>
</template>
<script>
export default {
  methods: {
    play()
    {
      this.$refs.hoge.play();
    }
  }
}
</script>

Composition API の場合は、単に下記だけでいい。ちょっと気持ち悪い気もするけど。

<script setup>
const hoge = ref({});

function play()
{
  hoge.value.play();
}
</script>