vue slot插槽,具名插槽,作用域插槽slot-scope

默认内容

当我们使用自定义的组件时想要设置一个默认内容，如果不传入值就使用默认值，这时后备内容就很有必要了

<template>
	<p>
		<slot>我是默认内容slot>
	p>
template>

父组件调用时我们不传入值 会显示默认内容而不是空

<my-component>my-component>

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的

<div class="container">
  <header>
    
  header>
  <main>
    
  main>
  <footer>
    
  footer>
div>

这个时候我们就需要使用具名插槽了 元素有一个特殊的属性 name 这个属性可以用来定义额外的插槽:

<div class="container">
  <header>
    <slot name="header">我是头部slot>
  header>
  <main>
    <slot>我是主体slot>
  main>
  <footer>
    <slot name="footer">我是页脚slot>
  footer>
div>

在父组件里我们使用v-slot来指定传递给某个插槽

<my-component>
	<template v-slot:header>我是传递的头部内容template>
	<template #footer>我是传递给页脚的插槽缩写template>
	<template >主体template>
my-component>

作用域插槽 slot-scope（旧）

自 2.6.0起被废弃,在接下来所有的 2.x 版本中 slot 和 slot-scope 属性仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

在 template 上使用特殊的 slot-scope 属性，可以接收传递给插槽的 prop (示例)：

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

父组件

<slot-example>
 
  <template slot="default" slot-scope="slotProps">
    <div class="tmpl">
       <span v-for="(item,ind) in slotProps.data" :key="ind">
       	{{item}}
       span>
    div>
  template>
slot-example>

子组件slot-example

<template>
  <div>
   <slot :data='arr'>slot>
  div>
template>

<script>
export default {
	data(){
		return{
			arr:[1,2,3,4,5,6]
		}
	}
}
script>

<style>

style>

父组件中slot-scope属性的值是可以自己命名的， 子组件中 :data=“arr” 把子组件中arr以data这个名传递到父组件slot-scope="slotProps"中,此时的slotProps为一个对象，格式是这样的

{data:[1,2,3,4...]}

所以slotProps.data才是arr的值。

<slot-example>
 
 
  <template slot="default" slot-scope="slotProps">
    <div class="tmpl">
       <span v-for="item in slotProps.data">{{item}}span>
    div>
  template>
slot-example>

❗注意 作用域插槽 默认用的名字是default ，不写会按照default来找，能找得到。但是组件的插槽改个名，程序按照default 就找不到了, 如果有多个插槽请标明slot="插槽名"

作用域插槽2.6.0版本（新）

v-slot指令自Vue2.6.0起被引入提供更好的支持solt和solt-scope

父组件想要根据子组件的数据渲染模板需要作用域插槽

父组件

<template>
  <div>
    <my-component>
      <template v-slot:default="sonArr">
        <span v-for="(item, ind) in sonArr.arr" :key="ind">{{ item }}span>
      template>
    my-component>
  div>
template>

<script>
import myComponent from "./myComponent.vue";
export default {
  components: {
    myComponent,
  },
};
script>

<style>
style>

子组件

<template>
  <div>
    <slot :arr="value">slot>
  div>
template>

<script>
export default {
  data() {
    return {
      value: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
};
script>

<style>
style>