vue slots 组件的组合/分发实例

前端之家收集整理的这篇文章主要介绍了vue slots 组件的组合/分发实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用slots 分发内容

使用组件时常常会有组件组合使用的情况,如下:

直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用 slots来内容分发

slots的使用方法如下:

@H_403_31@ Vue.component('app',{ template:'\
\ 没有则显示这个\
  • 111
  • \
  • 222
  • \
  • 333
  • \
    \ ',}) var app=new Vue({ el:'#app',components:{ 'child':{ template:'
    hello word
    ' },'child2':{ template:'
    hello vue js
    ' }

    }

    })

    标签没有引入其他组件时显示为图1,有其他组件时显示为图2

    同时可以实测到可以引入多个并列的组件,组件会依次显示

    但是这只能解决单个 组件的引入 ,实际应用中需要多个应用的组件会在多个位置,为了解决这个问题,就得确定slot位置的唯一性为了确定slot 的vue 中可以给slot 添加行内 name来识别 ,

    需要注意的是:

    同一父级下的slot 添加行内 name必须保证唯一;

    子组件下的slot 的name 是可以与父级组件的slot name 重复的,及每一级具有相对独立性。

    代码效果图如下:

    <div slot="slot2">How to use slot?

    @H_403_31@ Vue.component('app',{ template:'\
    \ 显示这个\
  • 111
  • \
  • 222
  • \ 显示这个\
  • 333
  • \
    \ ',components:{ 'child':{ template:'
    hello word\
  • 22222
  • \
    ' },'child2':{ template:'
    hello vue js
    ' }

    }

    })

    以上这篇vue slots 组件的组合/分发实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

    猜你在找的Vue相关文章