码迷,mamicode.com
首页 > 其他好文 > 详细

Vue插槽

时间:2019-07-31 18:09:59      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:microsoft   分发   语法   template   world   span   全选   作用   作用域   

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

标签:microsoft   分发   语法   template   world   span   全选   作用   作用域   

原文地址:https://www.cnblogs.com/haishen/p/11277727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!