插槽-动态插槽名

 <div id="demo">
    <base-com>
      <template v-slot:[dynamicslotname]>
          This is Me.
      </template>
    </base-com>
  </div>
  <script>
    Vue.component('base-com',{
      template:`
        <div>
          <header style="font-size=20px">
            <slot name="header"></slot>
          </header>
          <footer style="font-size=20px">
            <slot name="footer"></slot>
          </footer>
        </div>
      `
    })

   var vm = new Vue({
      el:"#demo",
      data:{
        dynamicslotname:'header'
      }
    })

  </script>

猜你喜欢

转载自blog.csdn.net/u012687612/article/details/112180529