vue中v-slot使用
1，v-slot的使用步骤
<!-- slot.vue--> <!-- 通过name属性指定具名插槽，没有name属性的为默认插槽--> <slot name="header">我是header</slot> <slot name="main">我是main</slot> <slot :title="title" name="footer"></slot> <slot></slot> // index.vue <!-- 通过v-slot:footer="title"来拿到slot页面传过来的数据，v-slot:xxx来指定对应slot.vue中的插槽--> <slot-name> <template v-slot:header>我是新的header</template> <template v-slot:main>哈哈哈哈</template> <template v-slot:default>我是默认的</template> <template v-slot:footer="title">{{ title.title.age }}</template> </slot-name> <!-- v-slot的简写形式--> <!-- 通过#号加上slot.vue中的对应插槽中的name属性的值--> <slot-name> <template #header>我是新的header</template> <template #footer="title">{{ title.title.age }}</template> </slot-name>
