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>

}

转载于:https://www.cnblogs.com/adah/p/10449787.html