一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    vue中slot的使用场景

    技术 121 2019-07-23 11:01

    首先写一个head的公共组件:

    <template>
     <div>
     <h1>1</h1>
     <h2>2</h2>
     <slot name="one"></slot>
     <slot name="two"></slot>
     </div>
    </template>
    

    如我们所知,在默认情况下引用这个组件,这个组件的内容会全部显示出来。

    但是我们现在的需求是one页面只期望显示slot为one的部分:

    <template>
     <div>
     <div>
     <headTop>
     <div slot="one">
     我是插槽one
     </div>
     </headTop>
     </div>
     {{key}}
     </div>
    </template>
    
    <script>
    import headTop from '@/components/head.vue'
    export default {
     data () {
     return {
     key: '先登录'
     }
     },
     components: {
     headTop
     }
    }
    </script>
    

    注:在head组件中的slot只是插槽的作用,具体的组件内容需要在父组件的 <div slot="one">我是插槽one</div> 中自定义

    文章评论

    评论列表(0