Vue插槽

Posted 2022-05-31 haishen

插槽语法是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>