vue slot插槽使用个人理解

最近项目不忙，看了看vue，看到了slot，练习了下，与大家分享下，希望有用～

 

个人理解：用法等同于“占位符”，占据一定的“位置”，进行不同的回显，可以设置默认值，效果类似于v-if，但是功能更丰富

 

slot用法一（基础用法）

子组件代码设置如下：

<template>
    <div>
        <slot>默认</slot>
    </div>
</template>
<script>
export default {
}
</script>

父组件代码设置如下：

<template>
    <div class='users'>
        <!-- 放置子组件 -->
        <Child></Child>
    </div>
</template>
<script>
import Child from '../components/child.vue';
export default {
    components:{
        Child
    },
}
</script>

页面回显如下：

子组件child中添加slot占位符，设置默认值，在父组件中引用渲染子组件占位符回显默认内容；

在父组件中给子组件标签内写入内容，案例代码如下：

<Child>
    <!-- 写入内容 -->
    <el-button>
        测试
    </el-button>
</Child>

在写入一个按钮节点后，页面回显如下：

子节点中的slot内容被父节点内容所替代；

总结：此时slot被作为占位符所使用，无内容时回显默认内容，当有内容时回显内容，效果有点类似于input的placeholder属性的效果；

 

slot用法二（多个slot同时使用）

子组件代码设置如下：

<template>
    <div>
        <slot>默认</slot>
        <slot>默认</slot>
        <slot>默认</slot>
    </div>
</template>
<script>
export default {
}
</script>

页面回显如下：

但是此时控制台会有如下警告：

来自有道翻译的解释：在同一渲染树中发现的插槽“默认”的重复存在-这可能会导致渲染错误。

此时用slot的属性name来设置额外的插槽；

<template>
    <div>
        <slot name='test1'>默认</slot>
        <slot name='test2'>默认</slot>
        <slot name='test3'>默认</slot>
    </div>
</template>

页面回显如下：

这是因为定义了slot的name名称后在使用时也要添加相应的配置，制定渲染的插槽（sloat标签）；

父组件代码设置如下：

<template>
    <div class='users'>
        <!-- 放置子组件 -->
        <Child>
            <!-- 写入内容,通过slot属性指定对应的插槽 -->
            <el-button slot='test2'>
                测试
            </el-button>
        </Child>
    </div>
</template>
<script>
import Child from '../components/child.vue';
export default {
    components:{
        Child
    },
}
</script>

页面回显如下：

第二个插槽（slot标签）被dom节点所覆盖，第一个和第三个不变；

总结：此时slot被作为可指定的占位符所使用，slot标签通过设置name属性进行区分，在父组件调用子组件时通过给子组件设置slot属性的方法设置作用的slot；

 

 

ps：以上就是我对slot的理解，不足之处欢迎评论指正交流～