解构插槽 Prop 的说明

解构插槽 Prop 的说明

下面是子组件Child.vue

<template>
  <div class="Child">
    <span v-for="item in list">
      <slot :Name="item.name" :Age="item.age">{{item.name}} </slot>
      <!-- 注意：这里Name不可以改成name，否则会发生错误，猜测是name是个关键字吧，将Name改成a、b什么的名称都行 -->
    </span>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    list: { type: Array },
  },
}
</script>

<style scoped>
.Child {
  color: blueviolet;
  background-color: yellow;
}
</style>

下面是App.vue

<template>
  <div id="app">
    <!-- 使用默认 -->
    <!--<Child :list="list" />-->

    <!-- 使用插槽 prop -->
    <Child :list="list">
      <template v-slot:default="slotProps">
        {{slotProps}}，
      </template>
    </Child>
    <br>

    <!-- 解构插槽 Prop -->
    <Child :list="list">
      <template v-slot:default="{Name, Age}"> <!-- 这里对对象slotProps作了解构 -->
        {{Name}}: {{Age}}
      </template>
    </Child>
  </div>

</template>

<script>
  import Child from "./Child"

  export default {
    name: "App",
    components: { Child },
    data() {
      return {
        list: [
          { name: 'Tom', age: 23 },
          { name: 'Jack', age: 24 },
          { name: 'Steve', age: 25 },
        ],
      };
    }
  }
</script>

当npm run serve后，浏览器页面为如下所示(我是通过vue-cli建立的一个项目)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8B0O8qr-1630920357295)(C:\Users\25895\AppData\Roaming\Typora\typora-user-images\image-20210906171921935.png)]

第一行是slotProps的打印结果，第二行是对对象slotProps作了解构，即{Name, Age} = slotProps

<template v-slot:default="{Name, Age}">
<!-- 这里对对象slotProps作了解构 -->
	{{Name}}: {{Age}}
</template>