vue中 slot 的使用总结

àì夳堔傛蜴生んèń 2022-12-11 11:29 128阅读 0赞

## vue中slot的使用总结 ##

**slot是Vue中的插槽，首先它是使用在 子组件 中的**  
**Vue的slot插槽，简单理解就是，在子组件内占坑，在父组件里填坑。**

**slot一般都是子组件定义了主体部分，父组件引入，然后父组件根据需求不同需要向里面添加不同的内容**

## 1 . 普通 slot 插槽 ##

**父组件**  
（ 记得将子组件引入，并且将组件在components注册后才能使用 ）

<template>
    
      <div>
        <slotTest>
        </slotTest>
      </div>
    </template>
    <script>
    import slotTest from './slotTest'
    
    export default { 
      data(){ 
        return{ 
    
        }
      },
      components:{ 
        slotTest
      }
    }
    </script>

**子组件**

**这时，我们向`<slotTest> </slotTest>`无论添加什么内容，浏览器中都不会识别，比如下面这个例子**

<template>
      <div>
        
        <slotTest>
          这是一段子组件没有slot插槽时定义的文字
        </slotTest>
      </div>
    </template>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
**接着我们向子组件中添加slot插槽**

这时，之前添加在父组件里那句话就被呈现出来了

![在这里插入图片描述][20200930143416628.png_pic_center]

## 2 . 具名插槽 ##

**具名插槽的作用是，一个萝卜一个坑，可以将父组件中的内容插入指定的子组件位置中**

**具名插槽的使用语法**  
**1 . 子组件定义slot时，在标签上加上`name='xxx'`属性**  
**2 . 父组件将想插入的部分最外部的div上加上`slot="xxx"`属性**

**如**  
**父组件**

<template>
      <div>
        
        <slotTest>
          <div slot="header">父组件传递过来的头部内容</div>
          <div slot="body">父身体内容</div>
          <div slot="footer">父组件传递过来的页脚内容</div>
        </slotTest>
      </div>
    </template>

**子组件**

**效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_left]

## 作用域插槽 slot-scope ##

**在使用作用域插槽时，我们要知道一个东西**  
**根据vue官方的说法：  
父组件模板的所有东西都会在父级作用域内编译；  
子组件模板的所有东西都会在子级作用域内编译。**

举个例子：  
我们在父组件和子组件中，同时定义一个name属性  
父组件`name:"张三"`  
子组件`name:"李四"`  
然后在父组件中，使用子组件，并使用子组件中的插槽，向子组件中插入一个 name 变量，那么这个name的值，在父组件中被调用，就会使用父组件中的`name:"张三"`，这就是它作用域限制

**但是，作用域插槽，允许 父组件 调用 子组件 内部的数据，子组件 的数据通过slot-scope属性传递到了父组件**

举个例子：  
**父组件**

<template>
    
       <div>
          <slotTest>
             <template slot-scope="fromChildList">
                {
       { fromChildList }}
             </template>
          </slotTest>
       </div>
    </template>
    <script> import slotTest from "./slotTest"; export default { components: { slotTest, }, }; </script>

**子组件**

<template>
       
       <div>
          <slot :childList="list"> </slot>
       </div>
    </template>
    <script> export default { data() { return { list: [ { name: "张三", age: "24", }, { name: "李四", age: "24", }, ], }; }, }; </script>

**这里说一下一个！！非常重要的！！东西**  
**slot-scope 会将接收到东西转化为对象的形式 ，这里就是 slot-scope 接收的是一个参数，并命名为 fromChildList，  
这里将参数打印出来看看**

![在这里插入图片描述][20200930160207845.png_pic_center]  
**所以我们如果想使用这个数据中的某一项数据，就要写成  
`{ { fromChildList.childList[0].name }}`的形式，这样就可以获取到`name=张三`了**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ecfaf32578af45ba98cacabf56ef99f0.png
[20200930143416628.png_pic_center]: /images/20221123/816ed45781a24c5aa007c31591e2dde8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/c89d699f058940178dc1f99a58fe558e.png
[20200930160207845.png_pic_center]: /images/20221123/213a343461114914b6ab0aa78efb685b.png