【Nuxt.js】【Vuetify】v-dialogをコンポーネント化

コンポーネントでv-dialogを実装するときには、親子間でdataを渡す必要がある。しかし、refを使うことで、親から子に値を渡すのみでv-dialogを実装できる。

// 子要素(@/components/Dialog.vue)
<template>
    <v-dialog v-model="isDisplay" width="600px">
        <v-card>
            <v-card>
                <v-card-title>ダイアログタイトル</v-card-title>
                <v-card-actions>
                    <v-row justify="center">
                         <v-col cols="4">
                             <v-btn @click="isDisplay=false">OK</v-btn>
                         </v-col>
                    </v-row>
                </v-card-actions>
            </v-card>
    </v-dialog>
</template>

<script>
export default({
    data: () => ({
        isDisplay: false
    })
})
</script>
// 親要素(@/pages/index.vue)
<template>
    <v-container>
        <v-btn @click="openDisplay">クリック</v-btn>
        <Dialog ref="dlg"></Dialog>
    </v-container>
</template>
<script>
import Dialog from '@/components/dialog'
export default({
    components: {
        Dialog
    },
    methods: {
        openDisplay() {
            this.$refs.dlg.isDisplay = true
        }
    }
})
</script>

裏技があるようだけれど、これ以外の方法はおそらくないと思われる。