Vue学习笔记 组件的插槽slot

插槽slot

子组件中加入标签，父组件调用子组件时，双标签的内容，就会复制到slot中

    app.component('global', {
        template: `
            <h3>global子组件开始</h3>
            <slot></slot>
            <h3>global子组件结束</h3>
        `
    });
    
    <div>插槽slot</div>
    <global><h2 style="color:red;">父组件传入的slot</h2></global>
    <global><h2 style="color:blue;">父组件传入的slot</h2></global>

插槽中使用子组件

父组件使用slot时，可以使用其他子组件

 

插槽中使用数据项

父组件使用slot时，可以使用数据项（动态数据）

父组件模板里调用的数据属性，使用的都是父组件里的数据

子组件模板里调用的数据属性，使用的都是子组件里的数据

 

插槽中的默认值

默认值的就是在组件插槽中直接输入值；

在有值传递过来的时候，会显示正常的值，没有值的时候就会显示默认值；

    app.component('GlobalDefault', {
        template: `
            <h3>GlobalDefault子组件开始</h3>
            <slot><h2>默认的slot内容</h2></slot>
            <h3>GlobalDefault子组件结束</h3>
        `
    });

具名的插槽