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