美文网首页
vue 插槽

vue 插槽

作者: 有一种感动叫做丶只有你懂 | 来源:发表于2021-02-26 14:07 被阅读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>
    

    相关文章

      网友评论

          本文标题:vue 插槽

          本文链接:https://www.haomeiwen.com/subject/rtemfltx.html