Vue插槽
Posted haishen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue插槽相关的知识,希望对你有一定的参考价值。
插槽语法是Vue实现的内容分发API,用于复合组件开发,该技术在通用组件库开发用有大量应用
Vue 2.6.0 之后采用全选 v-slot 语法取代之前的 slot slot-scope
1、匿名插槽
// parent <HelloWorld> abcabcabcbabc </HelloWorld> // child <slot></slot>
2、具名插槽:将内容分发到子组件指定的位置
// parent <HelloWorld> <template v-slot:default>abcabcabcbabc</template> <template v-slot:content>具名插槽</template> </HelloWorld> // child <slot></slot> <slot name="content"></slot>
3、作用域插槽,子组件可以自行展示内容// parent
<HelloWorld> <template v-slot:content="slotProps">slotProps.dong</template>
</HelloWorld> // child <slot name="content" dong="dong~~~~~~"></slot>
可以进行对象的解构写法
<HelloWorld>
<template v-slot:content="dong">dong</template>
</HelloWorld>
以上是关于Vue插槽的主要内容,如果未能解决你的问题,请参考以下文章