Vue插槽:(2.6.0以后版本棄用slot和slot-scope,改用v-slot)


關於Vue插槽的概念,大家可以從vue官網的api查看,我是看到網站的對於初接觸 這個要概念的人來說不是很清楚,我來貼下原碼,就比較直觀了

貼下原碼:

具名插槽:v-slot:header

Html:

<div id=’app’>

   <child>

       <template v-slot:header>

          <div>this is a header</div>

</template>

</child>

</div>

script部分:

Vue.component(‘child’,{

 Template:’<div><slot name=’header’></slot></div>

}

作用域插槽

Html:

<div id=’app’>

   <child>

       <template v-slot=’list’>

          <div>{{list.item}}</div>

</template>

</child>

</div>

script部分:

Vue.component(‘child’,{

data:function(){

 return{

      List:[1,2,3,4,5,6]

}

}

,

 Template:’<div><slot v-for=”item of list” :item=item></slot></div>

}


免責聲明!

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



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