Vue

by rootd

HTML

<div id="app">
	<v-block>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, ipsa!
    
    <template #footer="$scopedSlots">
      <button @click="$scopedSlots.close">
        X
      </button>
    </template>
	</v-block>
</div>

Vue

Vue.component('VBlock', {
template: `
	<div class="v-block">
		<div class="v-block__body">
			<slot/>
		</div>
		
		<div 
			v-if="$slots.footer"
			class="v-block__footer"
		>
			<slot 
      	name="footer"
        :close="onClose"
			/>
		</div>
	</div>
`,
data: () => ({
	isVisibleBody: true
}),
methods: {
	onClose () {
		this.isVisibleBody = true;
	}
}
});

new Vue({
  el: "#app"
})