Vue中slot与slot-scope的理解及使用

最新推荐文章于 2025-03-15 22:35:48 发布

Mr灬Fang

最新推荐文章于 2025-03-15 22:35:48 发布

阅读量1.9w

点赞数 76

分类专栏： Vue 文章标签： vue slot vue插槽 slot-scope

本文链接：https://blog.csdn.net/fang562878311/article/details/100579007

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

以前使用过vue，但是从来没有用过插槽slot，最近突然看到slot，发现有点不会用，因此决定系统的学习一下插槽slot。

但是在查看了vue文档后，感觉说的太笼统，让人难以理解，因此在网上查了很多资料，终于感觉自己对插槽slot有了一定的了解，决定记录下来，希望能帮到和我一样对插槽slot不懂的朋友。

对于官网文档中说的我就在此不复述了，感觉如果看懂的了的，也就不需要阅读这篇文章了。

首先要知道，插槽分两类，默认插槽和具名插槽；通俗理解就是默认插槽是没有名称的插槽，具名插槽是有名称的插槽。

何时使用插槽？

简单的举个栗子：有2个组件，父组件father，子组件son。

父组件 father

<template>
    <div>
        <h3>这是父组件</h3>
        <son>实践slot</son>
    </div>
</template>

子组件 son

<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
    </div>
</template>

一般我们的组件都会怎么写，但是这么写的话，会发现子组件中的实践slot是显示不出来的。如果需要让他显示出来，这时我们就可以用到插槽slot了。

如何使用插槽？

首先，子组件中我们要添加插槽slot，

<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
        <slot></slot> 
    </div>
</template>

这时，终于出现了slot。slot的位置就会出现父组件中实践slot这几个大字。

如图：

可以看到，这里面slot是没有名称的，顾名思义，这是插槽中的默认插槽。

然后在看看具名插槽，直接上代码，一目了然，

父组件

<template>
    <div>
        <h3>这是父组件</h3>
        <son><span>实践slot</span></son>
        <son>
            <template slot="myslot">
                <div>
                    实践具名slot
                </div>
            </template>
        </son>
    </div>
</template>

子组件

<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
        <slot></slot>
        <slot name="myslot"></slot>
    </div>
</template>

可以看出，和默认插槽不同的是，在子组件中，我们给插槽一个name属性，这个就是插槽的名称，同时在父组件中，我们在需要将内容插入的地方标签上加了一个slot属性，他的值就是我们的slot 名称name。

效果如下图：

上面就是2中插槽，默认插槽和具名插槽的用法。

下来是slot-scope。slot-scope是作用域插槽。

官网中有一句特别强调的话：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。简单的所，就是父组件中不能直接用自组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。如下代码

父组件

<template lang="">
    <div>
        <h3>这是父组件</h3>
        <son>
            <template slot="myslot" slot-scope="scope">
                <ul>
                    <li v-for="item in scope.data">
                        {{item}}
                    </li>
                </ul>
            </template>
        </son>
    </div>
</template>

子组件

<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
        <slot name="myslot" :data='list'></slot>
    </div>
</template>
<script>
export default {
    name:'Son',
    data(){
        return{
            list:[
                {name:"Tom",age:15},
                {name:"Jim",age:25},
                {name:"Tony",age:13}
            ]
        }
    }
}
</script>

首先先看下效果，