• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Adah
不要在最能吃苦的时候选择安逸
博客园    首页    新随笔    联系   管理    订阅  订阅
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>

}

posted on 2019-02-28 13:26  Adah  阅读(12325)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3