ファイル構成は以下のようになっています。
layouts/default.vuecomponents/Message.vuepages/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>
これは検索で出てこなきゃわからなかったわ。
書いてくれていた人には感謝!
■参考
【Nuxt.js】layoutsに設定をまとめつつ、タイトルはpagesから設定したい - Qiita
これって、Qiita記事の種になりませんか?つまり、こういうことになります/layoutsにヘッダーのコンポーネントを含めつつ/pagesのファイルから/layoutsで使用しているコンポーネ…
コメント