插槽二（默认，具名，作用域）

最新推荐文章于 2025-03-18 09:15:49 发布

原创最新推荐文章于 2025-03-18 09:15:49 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #html

vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了BiliBili.vue组件中默认插槽、具名插槽和作用域插槽的使用方法，通过App.vue中的例子展示了如何在父组件与子组件间传递数据。涵盖了数据绑定、模板渲染和组件复用的技巧。

插槽

默认插槽

BiliBili.vue

 <div class="aside-wrap">
	 <h2>排行榜</h2>
	 <!-- 插槽 -->
	 <slot></slot>
 </div>

App.vue

 <BiliBili>
        <ul>
            <li v-for="(aw,index) in awList" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
            </li>
        </ul>  
  </BiliBili>
    ------------------------------
    data(){
    return{
      awList:[
          {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
          {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
          {title:'震惊国人的10件事，尤其是第七个。',url:'http://www.baidu.com'},
          {title:'多活10年，不看后悔。',url:'http://www.baidu.com'},
          {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
          {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
          {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
          {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
          {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'}
      ],

具名插槽（添加name属性，防止重名问题）

BiliBili.vue

 <div class="aside-wrap">
    <h2>
         <slot name="awname"></slot>排行榜
     </h2>
     <!-- 具名插槽 -->
     <slot name="aw"></slot>
</div>

App.vue

 <BiliBili>
        <!-- template专门用来渲染使用的，不会在页面显示 -->
        <template slot="awname">动漫</template>

        <ul slot="aw">
            <li v-for="(aw,index) in awList" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
            </li>
        </ul>  
    </BiliBili>
    -----------------------------------------------------------
    data(){
    return{
      awList:[
          {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
          {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
          {title:'震惊国人的10件事，尤其是第七个。',url:'http://www.baidu.com'},
          {title:'多活10年，不看后悔。',url:'http://www.baidu.com'},
          {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
          {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
          {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
          {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
          {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'}
      ],

作用域插槽（添加 slot-scope属性）

BiliBili.vue

 <div class="aside-wrap">
     <h2>
            <slot name="awname"></slot>排行榜
        </h2>
        <!-- 作用域插槽 -->
        <slot name="aw" :awList="awList"></slot>
  </div>
  --------------------------------------------------
    data(){
        return {
             awList:[
                {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                {title:'震惊国人的10件事，尤其是第七个。',url:'http://www.baidu.com'},
                {title:'多活10年，不看后悔。',url:'http://www.baidu.com'},
                {title:'美国沉默，完全颠覆你的想象。',url:'http://www.baidu.com'},
                {title:'果断出手，这简直太神了。',url:'http://www.baidu.com'},
                {title:'灭绝人性，真是太天才了',url:'http://www.baidu.com'},
                {title:'国人不忍了，难以置信的骗术',url:'http://www.baidu.com'},
                {title:'美国慌了，不分享还是人吗？',url:'http://www.baidu.com'}
            ],

App.vue

<BiliBili>
 <!-- template专门用来渲染使用的，不会在页面显示 -->
    <template slot="awname">动漫</template>

    <ul slot="aw" slot-scope="{awList}">
        <li v-for="(aw,index) in awList" :key="index">
            <span>{{index + 1}}</span> 
            {{aw.title}}
        </li>
    </ul>  
</BiliBili>