下面這個(gè)例子主要是為了體現(xiàn) user 和 user1在各處的對(duì)應(yīng)關(guān)系
<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: '姓'
}
}
});
最終結(jié)果
welcome 姓 !
另外
各種html部分的簡(jiǎn)寫/變化語法如下:
<!--使用解構(gòu)-->
<div id="app14">
<current-user :user1="currentUser">
<template v-slot:default="{user}">
welcome {{user.lastName}} !
</template>
</current-user>
</div>
<!--由于使用的是默認(rèn)模板,去掉了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>
