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

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

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>

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

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

■参考