vue插槽、具名插槽和作用域插槽

不念不忘少年蓝@ 2024-04-17 16:00 33阅读 0赞

插槽使用场景是；如果子组件需要显示的内容并非来自本身，而是父组件传递进来的，而假如直接按下面这样写，是不可以实现的，因为如果me-component没有包含一个 `<slot>` 元素，则任何传入它的内容都会被抛弃：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
要实现上面的使用场景，可以利用插槽：

<div id="app">
            <me-component>
                <h1>我是header</h1>  
            </me-component>
        </div>
    <script >
        Vue.component('me-component', {          
            template:
                    `<div> <p>你好</p> <slot></slot> </div>`
        })
        var vm = new Vue({ 
            el:"#app"
        })
    </script >

但是，假如使用多个插槽的时候，就需要用具名插槽

<div id="app">
            <me-component>
                <h1 slot="header">我是header</h1>  
                <h1 slot="footer">我是footerr</h1>
            </me-component>
        </div>
    <script >
        Vue.component('me-component', {          
            template:
                    `<div> <p>你好</p> <slot name="header"></slot> <slot name="footer"></slot> </div>`
        })
        var vm = new Vue({ 
            el:"#app"
        })

另外slot 插槽还可以定义默认值，如果父组件没有对应的插槽标签，那么deom上显示的是`<slot ></slot>` 标签里的内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]  
以上代码，slot 特性的也可以直接用在一个普通的元素上。这样的话template标签对就可以去掉了

<h1 slot-scope="resave" >{ { resave.item}}</h1>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]

本文参考自：https://www.jianshu.com/p/d8401e291258

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b428d125909a4f60829ab42725203c54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ac66023ec6674899b2a550266cd980a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a04a1223225745999ead446653a0977e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8281a74e784747e5b540c845a8135a5b.png