vue中的slot封装组件弹窗

slot封装组件弹窗

 
        
          
        
 
        

vue组件slot入门---弹窗组件

slot 即插槽,相当于在子组件的 DOM 中留一个位置,父组件如果有需要,就可以在插槽里添加内容。

插槽的基础使用

这里是一个插槽的简单用法。

1.在子组件 Modal.vue 中用 slot 标签预留一个位置,slot 标签中的内容是后备内容,也可以为空:


后备内容:当父组件不在插槽里添加内容时,插槽显示的内容。

2.在父组件中使用子组件

在父组件中使用子组件,但不向自定义组件的插槽 slot 中添加内容:


此时如果打开弹框,弹框中显示的是后备内容“这是个弹框”:

vue中的slot封装组件弹窗_第1张图片

在父组件中使用子组件,并给插槽加入个性化内容:

个性化内容

此时如果打开弹框,弹框中显示的是“个性化内容”:

vue中的slot封装组件弹窗_第2张图片

弹窗组件

父App.vue



子Modal.vue

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue中的slot封装组件弹窗)