注意默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确:
<current-test v-slot="slotProps">
{{ slotProps.user.firstName }}
<template v-slot:other="otherSlotProps">
无效的
</template>
</current-test>
只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法:
<current-test>
<template v-slot:default="slotProps">
{{ slotProps.user1.firstName }}
</template>
<template v-slot:other="otherSlotProps">
{{ otherSlotProps.fruit.banana }}
</template>
</current-test>
<script>
组件
Vue.component("current-test", {
data: function() {
return {
user1: { firstName: "Tom", lastName: "Adh" },
fruit: { apple: "苹果", banana: "香蕉" }
};
},
template: `
<span>
<slot v-bind:user1="user1">
{{ user1.lastName }}
</slot>
<slot v-bind:fruit="fruit" name="other">
{{ fruit.apple }}
</slot>
</span>
`
});
</script>