【Nuxt.js】pages以下からdefalt.vue経由でコンポーネントの変数を変更する方法

ファイル構成は以下のようになっています。

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>

これは検索で出てこなきゃわからなかったわ。

書いてくれていた人には感謝！

■参考