Vue插槽

最新推荐文章于 2024-02-28 11:44:58 发布

原创

最新推荐文章于 2024-02-28 11:44:58 发布 · 803 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

vue的slot主要分三种：默认插槽，具名插槽，作用域插槽

使用插槽是在存在父子关系的组件，可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。

1、默认插槽的使用：

//  默认插槽<slot></slot>
// 子组件定义一个默认插槽
<template>
    <div>
        <div class="testSolt">
            <p class="title">普通插槽</p>
            <slot>默认的信息</slot>
        </div>        
        <!-- 可以在子组件中定义多个默认插槽，并设置插槽的位置，父组件要插入的内容都会被填充到这些默认插槽中 -->        
        <div style="margin-top:300px;background:#fff;height:100px;color:blue;">            
        	<slot>默认插槽的信息2</slot>        
        </div>
    </div>
</template>

// 父组件引入并使用这个插槽
<template>
    <div>
        <children>          
        <!-- 只要子组件中定义了slot，这里就可以通过p 标签将内容传给子组件并显示（子组件的slot 标签消失，父组件的p标签替换slot） -->          
        	<p>我是要显示的插槽信息</p>        
        </children>
    </div>
</template>
<script>
import Children from "./children"
</script>