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>

 

版权声明：本文为zxuedong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zxuedong/p/12534800.html