Vue13 插槽slot

示例:  子组件--顶部导航条

  问题:  当页面需求中,顶部导航条结构相似,但每部分标签又不同.

  这时,子组件中, 如果内容是固定的,就无法完成需求

Vue13  插槽slotVue13  插槽slotVue13  插槽slot

 

解决方法:

  使用slot插槽

    共同点较多的部分:

      1. 查看众多导航条中,公共部分最多的部分,可以写死在子组件中

      2. 可以通过<slot>大多相同的部分</slot>, 这样,既可以使用该默认的相同部分,也可以通过修改该slot插槽,进行变动,从而完成少部分不不同的更改

    不同的部分:

      2.不同的部分,不写固定标签和内容,通过slot插槽, 可以传入不同需求的标签或内容<slot></slot>

上一篇:vue slot多层组件嵌套实现


下一篇:vue.js之插槽(v-slot)(一)