<script>
import Dropdown from 'v-dropdown'
export default {
  components: {
    'v-dropdown': Dropdown
  }
}
</script>

<template>
  <v-dropdown @show="showChange">
    <!-- named slot -->
    <template #caller>
      <!-- dropdown container trigger -->
      <button type="button" class="btn">Open</button>
    </template>
    
    <div>
      some contents you want
    </div>
  </v-dropdown>
</template>
<script>
import Dropdown from 'v-dropdown'
export default {
  components: {
    'v-dropdown': Dropdown
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    showChange (val) {
      this.show = val
    }
  }
}
</script>

<template>
  <v-dropdown @show="showChange">
    <template #caller>
      <button type='button' class="btn">trigger</button>
    </template>
    <div>content</div>
  </v-dropdown>
</template>
<script>
export default {
  methods: {
    showChange (val) {
      // true for shown, false for hidden
      console.log(val)
    }
  }
}
</script>

<template>
  <v-dropdown ref='drop'>
    <template #caller>
      <button type='button' class="btn">Button</button>
    </template>
  </v-dropdown>
</template>
<script>
export default {
  methods: {
    click () {
      this.$refs.drop.visible()
    }
  }
}
</script>