vue具名插槽


具名插槽
  具有名字的插槽slot使用 中的 "name" 屬性綁定元素
  注意:
    1,如果沒有匹配到 則放到匿名的插槽中
    2,具名插槽的渲染順序,完全取決於模板,而不是取決於父組件中元素的順序
<div id="app">
    <!--這里的所有組件標簽中嵌套的內容會替換掉slot 如果不傳值 則使用 slot 中的默認值 -->
    <!-- 這里標簽內部的slot屬性會去匹配相同名字的插槽 -->
    <slot-box><div slot="head">slot內容</div></slot-box>
  </div>
  <script>
    Vue.component('slot-box',{
      // slot就是模板里面的插槽,里面可以有內容,如果沒有傳遞值,那么里面的內容為默認內容;
      // slot里面的name就是插槽的名字,
      template:`<div><h1>這是插槽的內容:</h1><slot name="head">默認內容</slot><h2>后面內容</h2></div>`
    })
    const vm = new Vue({
      el:'#app'
    })
</script>

 


免責聲明!

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



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