///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中添加属性
