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插槽的主要内容,如果未能解决你的问题,请参考以下文章

大前端之vue插槽slot

Vue 作用域插槽

vue插槽slot理解

vue 2.6 插槽更新 v-slot 用法总结

vue过滤器,slot插槽

vue2升级vue3:Vue2/3插槽——vue3的jsx组件插槽slot怎么处理