问获取错误:错误:当我尝试单击要查看的注释时，_ctx.openNote不是一个函数

EN

<template>
  <div class="body">
    <div class="notepad-container h-75 w-75">
      <header class="header d-flex justify-content-center align-items-center">
        <h4>Light Notepad v1</h4>
      </header>

      <section class="notepad-content">
        <note-list
          v-for="note in notes"
          :key="note.id"
          :note="note"
        ></note-list>
        <!-- <add-note-button></add-note-button> -->
      </section>

      <section class="notepad-editor">
        <!-- <save-button></save-button> -->
      </section>

      <section class="show-note"
      v-if="readingNote" === true">
        <show-note
          @open-note="readNote"
          v-for="note in notes"
          :key="note.id"
          :note="note"
        ></show-note>
      </section>
    </div>
  </div>
</template>
<script>
// import AddNoteButton from "./components/AddNoteButton.vue";
import NoteList from "./components/NoteList.vue";
// import SaveButton from "./components/SaveButton.vue";
import ShowNote from "./components/ShowNote.vue";

export default {
  components: {
    NoteList,
    // AddNoteButton,
    // SaveButton,
    ShowNote
  },
  data() {
    return {
      readingNote: false,
      notes: [
        {
          id: 1,
          title: "Note one title",
          body: "This is note ones body content"
        },
        {
          id: 2,
          title: "Note two title",
          body: "This is the second notes body content"
        }
      ],
      methods: {
        readNote() {
          this.readingNote = !this.readingNote;
        }
      }
    };
  },
};
</script>

<template>
  <div>
    <p @click="openNote">{{ note.title }}</p>
    <hr />
  </div>
</template>
<script>
export default {
  emits: ["open-note"],
  props: {
    note: {}
  },
  method: {
    openNote() {
      this.$emit("open-note");
      console.log("note opened!");
    }
  }
};
</script>

<template>
  <div>note details: {{ note.body }}</div>
</template>

<script>
export default {
  props: {
    note: {}
  }
};
</script>