Vue作用域插槽：基本用法

 

一 项目结构

 

 

二 App组件

 

<template>
  <div id="app">
    <!-- 子组件 -->
    <user v-slot:default="slotProps">
      <!-- 插槽内容 -->
      {{slotProps.user.firstName}}
    </user>
  </div>
</template>

<script>
import User from "./components/User.vue";

export default {
  name: "app",
  components: {
    User
  }
};
</script>

<style>
</style>

 

三 User组件

 

<template>
    <div>
        <!-- 作用域插槽：插槽prop -->
        <slot :user="user">
            <!-- 后备内容 -->
            {{user.lastName}}
        </slot>
    </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        firstName: "张",
        lastName: "三"
      }
    };
  }
};
</script>
<style>
</style>

 

四 运行效果

 

 

五 备注

 

1 v-slot指令在2.6.0版本中引入

2 v-slot:default 可以简写为 #default