vue中v-slot使用

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>