【slot】

• 插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现

  1. 默认插槽

  默认插槽的name是default

  • 父组件

    <template><div><Child><h3>默认插槽</h3></Child></div></template>
  

  • 子组件

  <template><div><!-- 默认插槽 --><!-- <slot name="default"></slot> --><slot></slot></div>
  </template>
  

  2. 具名插槽

  1. 在插槽上加上name,可以实现多个结构匹配
  2. v-slot必须要加在组件标签或者template标签上

  • 父组件

    <template><div><Child><!-- 可以简写成 <template #c1> --><template v-slot: c1><h3>插槽c1</h3></template><template v-slot: c2><h3>插槽c1</h3></template></Child></div></template>
  

  • 子组件

  <template><div><!-- 具名插槽 --><slot name="c1"></slot><slot name="c2"></slot></div>
  </template>
  

  3. 作用域插槽

  理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）

  具体编码：

  • 父组件：

    <template><div class="father"><h3>父组件</h3><div class="content"><!-- <Hobbies v-slot="params"> --><Hobbies #default="params"><ul><li v-for="y in params.hobbies" :key="y.id">{{ y.name }}</li></ul></Hobbies><Hobbies><!-- 加在标签上会报错， Game组件上是允许的 --><!-- <h3 #footer>sasdas</h3> --><Game #footer></Game></Hobbies></div></div></template><script setup lang="ts" name="Father">import Game from './Game.vue';import Hobbies from './Hobbies.vue'</script>
  

  • 子组件：<Hobbies>

  <template><div class="game"><h2>爱好</h2><slot :youxi="hobbies" haha="哈哈" hehe="呵呵"></slot></div>
  </template><script setup lang="ts" name="Game">import {reactive} from 'vue'let hobbies = reactive([{id:'01',name:'读书'},{id:'02',name:'唱歌'},{id:'03',name:'跳舞'},])
  </script>