vue-具名插槽的使用


  在上一篇講了插槽的基本使用,但是現在又有了新的需求了,一個組件中有3個插槽,只想替換中間的插槽,另外兩個默認即可,那該如何替換呢?具名插槽就派上用場了,說簡單點就是給插槽取個名字,當插入元素的時候說明要插入的是哪個插槽即可,代碼如下:

<body>
  <div id="app">
    <ccomponent>
      <span slot="center">插槽全部替換了</span>
    </ccomponent>
  </div>

</body>
<template id="tem">
  <div>
    <slot>
      <h1>我是插槽1</h1>
    </slot>
    <slot name="center">
      <h1>我是插槽2</h1>
    </slot>
    <slot>
      <h1>我是插槽3</h1>
    </slot>
  </div>
</template>

  當<span>不指定slot屬性時,默認是插入到所有的slot標簽


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM