下面这个例子主要是为了体现 user 和 user1在各处的对应关系
<div id="app14">
<current-user :user1="currentUser">
<template v-slot:default="slotProps">
welcome {{slotProps.user.lastName}} !
</template>
</current-user>
</div>
Vue.component('current-user', {
props: ['user1'],
template: `
<span >
<slot name="default" :user="user1">
{{user1.firstName}} 欢迎登陆
</slot>
</span>
`
});
var app14 = new Vue({
el: '#app14',
data: {
currentUser: {
firstName: '名',
lastName: '姓'
}
}
});
最终结果
welcome 姓 !
另外
各种html部分的简写/变化语法如下:
<!--使用解构-->
<div id="app14">
<current-user :user1="currentUser">
<template v-slot:default="{user}">
welcome {{user.lastName}} !
</template>
</current-user>
</div>
<!--由于使用的是默认模板,去掉了template,直接将属性放到根元素上-->
<div id="app14">
<current-user :user1="currentUser" v-slot:default="{user}">
welcome {{user.lastName}} !
</current-user>
</div>
<div id="app14">
<current-user :user1="currentUser" v-slot:default="{user:u}">
welcome {{u.lastName}} !
</current-user>
</div>
```html
<div id="app14">
<current-user :user1="currentUser" #default="{user:u}">
welcome {{u.lastName}} !
</current-user>
</div>
