JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="footer = !footer">
    Toggle
  </button>
  <my-child>
    <template v-if="footer" #footer>
      I am the footer
    </template>
  </my-child>
</div>

JavaScript

const MyChild = {
  template: `
    <div>
      <div v-if="$slots.footer">
        Direct access
      </div>
      <div v-if="shouldShowFooter">
        Wrapped in a computed property
      </div>
      <slot name="footer" />
    </div>
  `,
  computed: {
    shouldShowFooter () {
      return !!this.$slots.footer
    }
  }
}

new Vue({
  components: { MyChild },
  el: '#app',
  data () {
    return {
      footer: true
    }
  }
})