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

默认内容

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

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

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

<my-component></my-component>

具名插槽

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

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

这个时候我们就需要使用具名插槽了 <slot>元素有一个特殊的属性 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>
 <!--这里的slotProps是自定义的-->
  <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>
 <!--这里的slotProps是自定义的-->
 <!--如果有多个插槽请标明slot="插槽名"-->
  <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>