adah

关于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>

}

分类:

技术点:

相关文章:

  • 2021-09-30
  • 2022-12-23
  • 2021-10-13
  • 2021-09-24
  • 2021-10-02
  • 2021-05-29
  • 2021-06-09
  • 2022-12-23
猜你喜欢
  • 2022-01-06
  • 2020-03-19
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2019-03-13
  • 2022-12-23
相关资源
相似解决方案