ファイル構成は以下のようになっています。
layouts/default.vue
components/Message.vue
pages/symbol_list/_prefix.vue
動作イメージはpage/symbol_list/_prefix.vueからリンクを押してAPIを実行した後で、「更新しました」というメッセージを表示します。
メッセージの表示の仕方は共通化しており、components/Message.vueに書かれています。
結論
this.$nuxt.$emit と this.$nuxt.$on を使用します。
$on には default.vue で setListner が必要です。
[pages/symbol_list/_prefix.vue]
-- 中略 --
this.$nuxt.$emit('showSuccessMessage')
setTimeout(() => {
this.$nuxt.$emit('hideMessage')
}, 1500)
// 更新しましたというメッセージをtransitionでフワッと出したかったのでsetTimeoutしています。
[layouts/default.vue]
<template>
<div class="wrap">
<Header></Header>
<Message :message="message"></Message>
<main>
<Nuxt />
</main>
<Footer></Footer>
</div>
</template>
<script>
import Header from '@/components/Header'
import Message from '@/components/Message'
import Footer from '@/components/Footer'
export default {
components: {
Header,
Message,
Footer,
},
data() {
return {
message: '',
}
},
created() {
this.setListner()
},
methods: {
setListner() {
this.$nuxt.$on('showSuccessMessage', this.showSuccessMessage)
this.$nuxt.$on('hideMessage', this.hideMessage)
},
showSuccessMessage() {
this.message = '更新しました'
},
hideMessage() {
this.message = ''
},
},
}
</script>
[components/Message.vue]
<template>
<transition>
<div v-if="message" class="message">
<p class="alert alert-success">{{ message }}</p>
</div>
</transition>
</template>
<script>
export default {
props: {
message: {
type: String,
required: false,
default: '',
},
},
}
</script>
これは検索で出てこなきゃわからなかったわ。
書いてくれていた人には感謝!
■参考
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwTnV4dC5qcyVFMyU4MCU5MWxheW91dHMlRTMlODElQUIlRTglQTglQUQlRTUlQUUlOUElRTMlODIlOTIlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODElQTQlRTMlODElQTQlRTMlODAlODElRTMlODIlQkYlRTMlODIlQTQlRTMlODMlODglRTMlODMlQUIlRTMlODElQUZwYWdlcyVFMyU4MSU4QiVFMyU4MiU4OSVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NmNlZDI1YmNkZjkzMTljYWQ1MjM3MTZjZDRjYzBhZTE&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YW1hLXQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU0MzVkMmZmOGUyMmNhZGZkYjkzMWJmZDc5M2ZhOGJj&blend-x=142&blend-y=486&blend-mode=normal&s=b1ba7310343fc775fffce45621fc3454)
【Nuxt.js】layoutsに設定をまとめつつ、タイトルはpagesから設定したい - Qiita
これって、Qiita記事の種になりませんか?つまり、こういうことになります/layoutsにヘッダーのコンポーネントを含めつつ/pagesのファイルから/layoutsで使用しているコンポーネ…
コメント