正文
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
