Cacher is the code snippet organizer for pro developers

入れ子構造のイベント受け渡し

SideBox ③
├─ ShareButtons ②
│   └ CopyUrlButton ①
└─ CopyUrlModal ④

CopyUrlButton ①

子（自身）から親のメソッドを叩く

<template>
  <button @click="openCopyUrlModal()"></button>
</template>

<script>
export default {
  methods: {
    openCopyUrlModal() {
      this.$emit('openCopyUrlModal')
    }
  }
}
</script>

ShareButtons ②

子（自身）から親のメソッドを叩く

<template>
  <div class="share-buttons">
    <CopyUrlButton @openCopyUrlModal="openCopyUrlModal"/>
  </div>
</template>

<script>
import CopyUrlButton from "~/components/atoms/CopyUrlButton"
export default {
  components: {
    CopyUrlButton,
  },
  methods: {
    openCopyUrlModal() {
      this.$emit('openCopyUrlModal')
    }
  }
}
</script>

SideBox ③

このコンポーネントが一番の親なので、役目が二つ

• 子から親（自身）のメソッドを叩かれる
• 親（自身）から子のメソッドを叩く

<template>
  <div class="side-box">
    <ShareButtons @openCopyUrlModal="openCopyUrlModal" />
    <CopyUrlModal ref="copyUrlModal"/>
  </div>
</template>

<script>
import ShareButtons from "~/components/molecules/ShareButtons"
import CopyUrlModal from '~/components/molecules/CopyUrlModal'

export default {
  components: {
    ShareButtons,
    CopyUrlModal,
  },
  methods: {
    openCopyUrlModal() {
      this.$refs.copyUrlModal.open()
    }
  }
}
</script>

CopyUrlModal ④

親から子（自身）のメソッドを叩く
最終的に叩かれる側はメソッドを用意するだけ。

<template>
  <transition name="modal">
    <div v-if="isShow" class="copy-url-modal">
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    open() {
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
      }, 2000);
    }
  }
}
</script>