9.slot

具名插槽

<!-- father Component -->
<Child>
	<template slot="center">
  	<div>...</div>
  </template>
  
  	<template slot="footer">
  	<div>...</div>
  </template>
</Child>

<!-- child Component -->
<template>
	<div>
    <!-- 定义插槽 -->
    <slot name="center">default content</slot>
    <slot name="footer">default content</slot>
  </div>
</template>

作用域插槽

作用域插槽是一种特别的插槽，用于让子组件将它的一些数据传递回给父组件，在父组件的插槽内容中使用这些数据。这样一来，父组件可以根据子组件提供的数据来决定插槽内容怎么显示。这对于制作可定制内容的组件特别有用。 同样以Vue.js为例，下面是作用域插槽的一个小示例： 子组件（ChildComponent.vue）：

<template>
  <div>
    <slot :text="slotText">
      {{ slotText }} <!-- 默认内容 -->
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slotText: '来自子组件的数据'
    };
  }
};
</script>

父组件（ParentComponent.vue）中使用带数据的子组件：

<template>
  <div>
    <ChildComponent>
      <!-- 定义作用域插槽的内容 -->
      <!-- 使用template和slot-scope接收子组件传递过来的数据 -->
      <template slot-scope="slotProps"> <!-- slotProps是一个对象，对象里包装着子组件的soloText -->
        这是使用作用域插槽的内容：{{ slotProps.text }}
      </template>
    </ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
};
</script>

在Vue 2.6版本之后，v-slot指令是推荐的方式来声明接收子组件传递的数据。在这个例子中，ChildComponent将它的slotText数据传递给父组件，父组件通过定义v-slot:default="slotProps"来接收这个数据，并能够在模板中使用这个数据。 请根据你使用的框架或库的版本和语法规则来调整这个示例。