vue 插槽

2021-02-26  本文已影响0人  有一种感动叫做丶只有你懂

插槽语法是Vue实现的内容分发API,用于复合组件开发。

匿名插槽

// comp
<div>
   <slot></slot>
</div>

// parent
<comp>
    hello
</comp>

具名插槽

// comp
<div>
  <slot name="foo"> </slot>
</div>

// parent
<comp>
  <template v-slot:default> </template>
</comp>

作用域插槽

将内容分发到子组件指定位置

// comp
<div>
  <slot name="foo" :info="info"> </slot>
</div>
<script>
export default {
  data(){
    return{
      info:"张三"
    }
  }
}
</script>

// parent
<comp>
  <template v-slot:foo="slotScopes"> 
      {{slotScopes.info}}//"张三"
  </template>
</comp>
上一篇下一篇

猜你喜欢

热点阅读