vue 插槽

///child.vue small
<template>
  <div>
    <!-- <slot :todos='todos'></slot> -->
    <h1 v-for="(item, index) of todos" :key="index">{{item.text}}</h1>
  </div>
</template>
///test.vue middle
<template>
  <div>
    <child :todos='todos'>
      <!-- <template slot-scope="slotProps">
        <h1 v-for='(item,index) of slotProps.todos' :key="index">{{item.text}}</h1>
      </template> -->
    </child>
    <slot name="footer"></slot>
    <slot name='header' ></slot>
  </div>
///App.vue  big
    <test>
      <header slot='header'>header</header>
      <footer slot="footer">footer</footer>
    </test>

在父组件调用子组件的时候，可以给子组件放置插槽内容，可以用<header slot='header'>header</header> <footer slot="footer">footer</footer>这种形式，加上slot，在子组件的模板中，加上相对应的插槽名字<slot name="footer"></slot> <slot name='header' ></slot>

插槽作用域

在父组件调用子组件的时候，给子组件传递属性:todos='todos'，子组件在props中接受属性todos，在模板中定义<slot :todos='todos' :color='color'></slot>，把属性信息传递到父组件的slot-scope中的对象slotProps（也可以用解构赋值{todos, color}），在父组件当中就可以通过slotProps取到子组件属性中的值

子组件可以通过触发event事件，或者插槽的方式给父组件传递值
父组件通过定义属性的方式给子组件的props中添加属性