Vue 插槽详解

举报
SHQ5785 发表于 2022/03/29 10:12:55 2022/03/29
【摘要】 一、概述插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置name属性的叫具名插槽,不设置name属性的叫不具名插槽,在父组件中使用子组件时候,可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用...

一、概述

插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置name属性的叫具名插槽,不设置name属性的叫不具名插槽,在父组件中使用子组件时候,可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。

插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入html代码。

二、使用步骤

  1. 子组件中定义插槽;
  2. 父组件使用子组件时往插槽写入代码;

三、何时使用插槽?

简单的举个栗子:有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>

这时,终于出现了slotslot的位置就会出现父组件中实践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
在这里插入图片描述

接下来看下slot-scopeslot-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>

在这里插入图片描述
其中,下方三个对象的值,我们本身是在子组件中定义的,按照官方文档中说的,本来父组件中是无法显示出来这些数据的,但是为什么现在显示出来了呢?这就要归功于我们强大的slot-scope了。

首先,在子组件中的插槽上有一句data="list",而在父组件中也有slot-scope="scope"slot-scope就是取data的值,slot-scope的值是自定义的,我们可以取任何名称,但是data的值传过来时是以对象形式传输的,所以在这scope.data才是list的值。

这样我们就可以在父组件中取到子组件的值,并且加以应用了。

五、拓展阅读

vue2.6.0开始,slotslot-scope已经被废弃,推荐使用v-slot;有关两者的用法区别,请移步博文《Vue进阶(幺贰捌):Vue插槽:slot、slot-scope与指令v-slot使用方法区别讲解》。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200