【Nuxt,js】slotで共通コンポーネントを作る

前回の記事で使用したダイアログコンポーネントで簡単に説明します。

【Nuxt,js/Vue.js】確認ダイアログコンポーネントで$emitの挙動を学ぶ

結論$emitは子コンポーネントから親コンポーネントにイベントを送るときに使用する実際にNuxt.jsで$emitを使用して確認ダイアログを作成してみる▼親コンポーネントpages/sample/dialog.vueに子であるダイアログコン

▼親テンプレート(dialogコンポーネント：Dialog)

<template lang="pug">
CommonDialog(v-if="active" @onCancelClicked="onCancelClicked")
  div(slot="header") サンプルダイアログ
  div(slot="body")
    p これはサンプルダイアログです。
    p 閉じるにはOKボタンを押してください。
</template>

<script>
import CommonDialog from "@/components/CommonDialog";

export default {
  name: "SampleDialog",
  components: {
    CommonDialog
  },
  props: {
    active: {
      type: Boolean,
      required: false,
      default() {
        return false;
      }
    }
  },
  methods: {
    onCancelClicked() {
      this.$emit("cancelClicked");
    }
  }
};
</script>

▼子テンプレート(dialog共通コンポーネント：CommonDialog)

<template lang="pug">
div.dialog
  div.dialog__overlay
  div.dialog__card
    div.dialog__header
      slot(name="header")
    div.dialog__body
      slot(name="body")
    div.dialog__footer
      Button.dialog__btn(
        @click="cancelClicked"
      ) OK
</template>

<script>
export default {
  name: "CommonDialog",
  methods: {
    cancelClicked() {
      this.$emit("onCancelClicked");
    }
  }
};
</script>