vue中 slot 的使用总结

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>

子组件

<template>
<!-- 子组件 -->
  <div>
    子组件
  </div>
</template>

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

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

接着我们向子组件中添加slot插槽

<template>
<!-- 子组件 -->
  <div>
    子组件
    <slot></slot>
  </div>
</template>

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

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>

子组件

<template>
<!-- 子组件 -->
  <div>
    子组件
    <div>----------页头-----------</div>
    <slot name='header'></slot>
    <div>----------页中-----------</div>
    <slot name='body'></slot>
    <div>----------页脚-----------</div>
    <slot name='footer'></slot>
  </div>
</template>

效果

作用域插槽 slot-scope

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

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

<slotTest>
         {{ name }}
</slotTest>

但是，作用域插槽，允许 父组件 调用 子组件 内部的数据，子组件 的数据通过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，
这里将参数打印出来看看

所以我们如果想使用这个数据中的某一项数据，就要写成
{{ fromChildList.childList[0].name }}的形式，这样就可以获取到name=张三了