vue--插槽

1、默认插槽

直接在组件中写结构,传入组件中


        
      
      
          
  • {{item}}
"电影"
>

< slot>标签


category组件






app组件






2、具名插槽

当使用多个插槽时,想给不同位置,分别添加不同的结构


更多美食
  • {{item}}
"foot" slot="footer"> 单机游戏 网络游戏游戏
"电影"> "referrer" content="no-referrer" />

category组件






app组件:






3、作用域插槽

当数据在子组件中,但父组件要生成不同结构,通过插槽传递给子组件,可使用作用域插槽传递数据!


作用域插槽一定要使用标签template,才能传递数据!!

category02组件:






app组件:






结果:

vue--插槽_第1张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)