vue插槽

作者: 孤独的豺狼 | 来源:发表于2020-01-06 13:58 被阅读0次

    vue插槽使用

    1.基本插槽实现
    父级设置

    <template>
      <div>
        <list url="/profile">
            <button>插槽</button>
            <div>可以点吗</div>
            </list>
      </div>
    </template>
    <script>
    import list from "./HelloWorld2.vue";
    export default {
        name: "HelloWorld",
        components:{
            list
        },
     }
    </script>
    

    子级设置

    <template>
      <div>
        <a  v-bind:href="url" class="nav-link" >
            <slot></slot>
        </a>
      </div>
    </template>
    <script>
    export default {
      name: "HelloWorld2",
      data() {
        return {
            url:'[https://www.baidu.com/?tn=92150826_hao_pg](https://www.baidu.com/?tn=92150826_hao_pg)
    '
        };
      },
     }
    </script>
    

    2、使用name设置插槽显示隐藏
    父组件使用v-slot绑定

    <template>
      <div>
        <list v-solt:head-left url="/profile">
            <button>插槽</button>
            <div>可以点吗</div>
            </list>
      </div>
    </template>
    <script>
    import list from "./HelloWorld2.vue";
    export default {
        name: "HelloWorld",
        components:{
            list
        },
     }
    </script>
    

    子组件使用name来定义

    <template>
      <div>
        <a  v-bind:href="url" class="nav-link" >
            <slot name="head-left"></slot>
        </a>
      </div>
    </template>
    <script>
    export default {
      name: "HelloWorld2",
      data() {
        return {
            url:'[https://www.baidu.com/?tn=92150826_hao_pg](https://www.baidu.com/?tn=92150826_hao_pg)
    '
        };
      },
     }
    </script>
    

    这是小编对vue插槽最基本的理解,希望各位大神多提意见,感谢对本人的支持,谢谢

    相关文章

      网友评论

          本文标题:vue插槽

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