登录
当前位置： 首页 > 工具软件 > GridManager.js > 使用案例 >

vue.js插槽的学习（slot）

鲍高扬
2023-12-01

1,默认插槽

子组件：<slot></slot>

子组件.vue

<template>
  <div class="bili-grid">
        <div class="bili-title">
            <span>番剧</span>
            <ul>
                <li>最近更新</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <a>查看更多></a>
            <a>新番时间表></a>
            
        </div>
        <div class="bili-video-content">
            <ul>
                <li v-for="fj in fanju" :key="fj.id">
                    <img :src="fj.src">
                    <h3>{{fj.title}}</h3>
                    <p>{{fj.subtitle}}</p>
                </li>
            </ul>
        </div>
        <div class="aside-wrap">
            <h2>排行榜</h2>
            <!-- 插槽 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:'BiliBili',
    data(){
        return {
            fanju:[
                {  
                    id:'1',
                    src: require('../assets/images/01.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'2',
                    src: require('../assets/images/02.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'3',
                    src: require('../assets/images/03.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'4',
                    src: require('../assets/images/04.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'5',
                    src: require('../assets/images/05.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'6',
                    src: require('../assets/images/06.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'7',
                    src: require('../assets/images/07.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'8',
                    src: require('../assets/images/08.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'9',
                    src: require('../assets/images/09.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'10',
                    src: require('../assets/images/10.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
   
            ]
        }
    }
}
</script>

<style>
*{margin: 0;padding: 0;}
.bili-grid{
    width: 1711px;
    height: 484px;
    margin: 0 auto;
}
.bili-title{
    width: 1424px;
    height: 34px;
    float: left;
}
.bili-video-content{
    width: 1424px;
    height: 434px;
    margin-top: 16px;
    float: left;
}
.aside-wrap{
    width: 275px;
    height: 484px;
    float: left;
    margin-top: -34px;
    margin-left: 12px;
}
.aside-wrap h2{
    font-size: 24px;
    margin-left: 6px;
    margin-top: 10px;
    color: inherit;
}

.aside-wrap ul{
    list-style: none;
    margin-top: 20px;
}
.aside-wrap ul li{
    font-size: 14px;
    line-height: 45px;
    border: 1px solid #f1f3f5;
    /* #f6f7f8 */
}
/* :nth-child odd双行 even单行 如果是数字就是数字对应行数 */
.aside-wrap ul li:nth-child(even){
    background-color: #f6f7f8;
}
.aside-wrap ul li span{
    font-size: 17px;
        /* 字体倾斜 */
    font-style: italic;
}
.aside-wrap ul li:nth-child(1) span{
    color: #ff473d;
}
.aside-wrap ul li:nth-child(2) span{
    color: #ff6a29;
}
.aside-wrap ul li:nth-child(3) span{
    color: #ff9214;
}


.bili-grid span{
    margin-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: var(--text1);
    transition: color .2s linear;
    float: left;
}
.bili-grid span:hover{
    color:#00aeec;
    cursor: pointer;
}
.bili-title ul{
    list-style: none;
    float: left;
    background-color: #f6f7f8;
    border-radius: 18px;
}
.bili-title ul li{
    float: left;
    margin-left: 10px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 14px;
    
}
.bili-title ul li:nth-child(1){
    background-color: #00aeec;
    color: #ffffff;
    border-radius: 18px;
    margin-left: 0px;
}
.bili-title a{
    width: 103px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    background-color: #ffffff;
    cursor: pointer;
    float: right;
}
.bili-video-content ul{
    list-style: none;
}
.bili-video-content ul li{
    width: 270px;
    height: 207px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
.bili-video-content ul li img{
    width: 270px;
    height: 155px;
    border-radius: 7px;
}
.bili-video-content ul li h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word!important;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    padding-right: 24px;
    color: #18191c;
    font-size: 15px;
    line-height: 22px;
    transition: color .2s linear;
}
.bili-video-content ul li p{
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #9499a0;
}
</style>

app.vue

<template>
  <div id="app">
    <BiliBili>
        <ul>
            <li v-for="(aw,index) in awList" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
            </li>
        </ul>  
    </BiliBili><br><br><br>
    <BiliBili>
        <ul>
            <li v-for="(aw,index) in awList1" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
                <span class="number">10分</span>
            </li>
        </ul> 
    </BiliBili><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>

  </div>
</template>

<script>
//引入组件
import BiliBili from './components/BiliBili.vue'

export default {
  name: 'App',
  components: {//注册组件
    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'}
      ],
      awList1:[
          {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'},
                {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                {title:'震惊国人的事，尤其是第七个。',url:'http://www.baidu.com'},
                {title:'多活10年，不看后悔。',url:'http://www.baidu.com'}
                
            ]
    }
  }
}
</script>

<style scoped>
    .number{
      float:right;
      color: #000;
      font-size: 13px;
    }
</style>

2，具名插槽

子组件： <slot name="aw"></slot>

fuzujian：<ul slot="aw">

子组件.vue

<template>
  <div class="bili-grid">
        <div class="bili-title">
            <span>番剧</span>
            <ul>
                <li>最近更新</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <a>查看更多></a>
            <a>新番时间表></a>
            
        </div>
        <div class="bili-video-content">
            <ul>
                <li v-for="fj in fanju" :key="fj.id">
                    <img :src="fj.src">
                    <h3>{{fj.title}}</h3>
                    <p>{{fj.subtitle}}</p>
                </li>
            </ul>
        </div>
        <div class="aside-wrap">
            <h2>
                <slot name="awname"></slot>排行榜
            </h2>
            <!-- 具名插槽 -->
            <slot name="aw"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:'BiliBili',
    data(){
        return {
            fanju:[
                {  
                    id:'1',
                    src: require('../assets/images/01.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'2',
                    src: require('../assets/images/02.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'3',
                    src: require('../assets/images/03.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'4',
                    src: require('../assets/images/04.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'5',
                    src: require('../assets/images/05.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'6',
                    src: require('../assets/images/06.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'7',
                    src: require('../assets/images/07.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'8',
                    src: require('../assets/images/08.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'9',
                    src: require('../assets/images/09.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'10',
                    src: require('../assets/images/10.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
   
            ]
        }
    }
}
</script>

<style>
*{margin: 0;padding: 0;}
.bili-grid{
    width: 1711px;
    height: 484px;
    margin: 0 auto;
}
.bili-title{
    width: 1424px;
    height: 34px;
    float: left;
}
.bili-video-content{
    width: 1424px;
    height: 434px;
    margin-top: 16px;
    float: left;
}
.aside-wrap{
    width: 275px;
    height: 484px;
    float: left;
    margin-top: -34px;
    margin-left: 12px;
}
.aside-wrap h2{
    font-size: 24px;
    margin-left: 6px;
    margin-top: 10px;
    color: inherit;
}

.aside-wrap ul{
    list-style: none;
    margin-top: 20px;
}
.aside-wrap ul li{
    font-size: 14px;
    line-height: 45px;
    border: 1px solid #f1f3f5;
    /* #f6f7f8 */
}
/* :nth-child odd双行 even单行 如果是数字就是数字对应行数 */
.aside-wrap ul li:nth-child(even){
    background-color: #f6f7f8;
}
.aside-wrap ul li span{
    font-size: 17px;
        /* 字体倾斜 */
    font-style: italic;
}
.aside-wrap ul li:nth-child(1) span{
    color: #ff473d;
}
.aside-wrap ul li:nth-child(2) span{
    color: #ff6a29;
}
.aside-wrap ul li:nth-child(3) span{
    color: #ff9214;
}


.bili-grid span{
    margin-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: var(--text1);
    transition: color .2s linear;
    float: left;
}
.bili-grid span:hover{
    color:#00aeec;
    cursor: pointer;
}
.bili-title ul{
    list-style: none;
    float: left;
    background-color: #f6f7f8;
    border-radius: 18px;
}
.bili-title ul li{
    float: left;
    margin-left: 10px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 14px;
    
}
.bili-title ul li:nth-child(1){
    background-color: #00aeec;
    color: #ffffff;
    border-radius: 18px;
    margin-left: 0px;
}
.bili-title a{
    width: 103px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    background-color: #ffffff;
    cursor: pointer;
    float: right;
}
.bili-video-content ul{
    list-style: none;
}
.bili-video-content ul li{
    width: 270px;
    height: 207px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
.bili-video-content ul li img{
    width: 270px;
    height: 155px;
    border-radius: 7px;
}
.bili-video-content ul li h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word!important;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    padding-right: 24px;
    color: #18191c;
    font-size: 15px;
    line-height: 22px;
    transition: color .2s linear;
}
.bili-video-content ul li p{
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #9499a0;
}
</style>

app.vue

<template>
  <div id="app">
    <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><br><br><br>
    <BiliBili>
        <template slot="awname">游戏</template>

        <ul slot="aw">
            <li v-for="(aw,index) in awList1" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
                <span class="number">10分</span>
            </li>
        </ul> 
    </BiliBili><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>

  </div>
</template>

<script>
//引入组件
import BiliBili from './components/BiliBili.vue'

export default {
  name: 'App',
  components: {//注册组件
    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'}
      ],
      awList1:[
          {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'},
                {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                {title:'震惊国人的事，尤其是第七个。',url:'http://www.baidu.com'},
                {title:'多活10年，不看后悔。',url:'http://www.baidu.com'}
                
            ]
    }
  }
}
</script>

<style scoped>
    .number{
      float:right;
      color: #000 !important;
      font-size: 13px;
    }
</style>

3，作用域插槽

子组件： <slot name="aw" :awList="awList"></slot>

fuzujian：<ul slot="aw" slot-scope="{awList}">

子组件.vue

<template>
  <div class="bili-grid">
        <div class="bili-title">
            <span>番剧</span>
            <ul>
                <li>最近更新</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <a>查看更多></a>
            <a>新番时间表></a>
            
        </div>
        <div class="bili-video-content">
            <ul>
                <li v-for="fj in fanju" :key="fj.id">
                    <img :src="fj.src">
                    <h3>{{fj.title}}</h3>
                    <p>{{fj.subtitle}}</p>
                </li>
            </ul>
        </div>
        <div class="aside-wrap">
            <h2>
                <slot name="awname"></slot>排行榜
            </h2>
            <!-- 作用域插槽 -->
            <slot name="aw" :awList="awList"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:'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'}
            ],
            awList1:[
                {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'},
                        {title:'大家好我是李毅大帝，今天我入驻',url:'http://www.baidu.com'},
                        {title:'震惊，半夜为何无故被敲门',url:'http://www.baidu.com'},
                        {title:'震惊国人的事，尤其是第七个。',url:'http://www.baidu.com'},
                        {title:'多活10年，不看后悔。',url:'http://www.baidu.com'}
                        
                    ],
            fanju:[
                {  
                    id:'1',
                    src: require('../assets/images/01.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'2',
                    src: require('../assets/images/02.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'3',
                    src: require('../assets/images/03.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'4',
                    src: require('../assets/images/04.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'5',
                    src: require('../assets/images/05.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'6',
                    src: require('../assets/images/06.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'7',
                    src: require('../assets/images/07.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'8',
                    src: require('../assets/images/08.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'9',
                    src: require('../assets/images/09.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
                {
                    id:'10',
                    src: require('../assets/images/10.jpg'),
                    title:'博人传 火影忍者新时代',
                    subtitle:'更新至第208话'
                },
   
            ]
        }
    }
}
</script>

<style>
*{margin: 0;padding: 0;}
.bili-grid{
    width: 1711px;
    height: 484px;
    margin: 0 auto;
}
.bili-title{
    width: 1424px;
    height: 34px;
    float: left;
}
.bili-video-content{
    width: 1424px;
    height: 434px;
    margin-top: 16px;
    float: left;
}
.aside-wrap{
    width: 275px;
    height: 484px;
    float: left;
    margin-top: -34px;
    margin-left: 12px;
}
.aside-wrap h2{
    font-size: 24px;
    margin-left: 6px;
    margin-top: 10px;
    color: inherit;
}

.aside-wrap ul{
    list-style: none;
    margin-top: 20px;
}
.aside-wrap ul li{
    font-size: 14px;
    line-height: 45px;
    border: 1px solid #f1f3f5;
    /* #f6f7f8 */
}
/* :nth-child odd双行 even单行 如果是数字就是数字对应行数 */
.aside-wrap ul li:nth-child(even){
    background-color: #f6f7f8;
}
.aside-wrap ul li span{
    font-size: 17px;
        /* 字体倾斜 */
    font-style: italic;
}
.aside-wrap ul li:nth-child(1) span{
    color: #ff473d;
}
.aside-wrap ul li:nth-child(2) span{
    color: #ff6a29;
}
.aside-wrap ul li:nth-child(3) span{
    color: #ff9214;
}


.bili-grid span{
    margin-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: var(--text1);
    transition: color .2s linear;
    float: left;
}
.bili-grid span:hover{
    color:#00aeec;
    cursor: pointer;
}
.bili-title ul{
    list-style: none;
    float: left;
    background-color: #f6f7f8;
    border-radius: 18px;
}
.bili-title ul li{
    float: left;
    margin-left: 10px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 14px;
    
}
.bili-title ul li:nth-child(1){
    background-color: #00aeec;
    color: #ffffff;
    border-radius: 18px;
    margin-left: 0px;
}
.bili-title a{
    width: 103px;
    height: 34px;
    line-height: 34px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #e3e5e7;
    background-color: #ffffff;
    cursor: pointer;
    float: right;
}
.bili-video-content ul{
    list-style: none;
}
.bili-video-content ul li{
    width: 270px;
    height: 207px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
.bili-video-content ul li img{
    width: 270px;
    height: 155px;
    border-radius: 7px;
}
.bili-video-content ul li h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word!important;
    word-break: break-all;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    padding-right: 24px;
    color: #18191c;
    font-size: 15px;
    line-height: 22px;
    transition: color .2s linear;
}
.bili-video-content ul li p{
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #9499a0;
}
</style>

app.vue

<template>
  <div id="app">
    <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><br><br><br>
    <BiliBili>
        <template slot="awname">游戏</template>

        <ul slot="aw">
            <li v-for="(aw,index) in awList1" :key="index">
                <span>{{index + 1}}</span> 
                {{aw.title}}
                <span class="number">10分</span>
            </li>
        </ul> 
    </BiliBili><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>
    <BiliBili/><br><br><br>

  </div>
</template>

<script>
//引入组件
import BiliBili from './components/BiliBili.vue'

export default {
  name: 'App',
  components: {//注册组件
    BiliBili
  }
}
</script>

<style scoped>
    .number{
      float:right;
      color: #000 !important;
      font-size: 13px;
    }
</style>

 类似资料：

相关阅读

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】Vue.js学习之过滤器详解学习vue.js中class与style绑定JavaScript的MVVM库Vue.js入门学习笔记Vue.js第二天学习笔记（vue-router）

相关文章

学习C++之前要先学习C语言吗？java学习路线爱学习教育学习前的准备工作美的机器学习群面

相关问答

uniapp不支持动态插槽？java学习 - 哪里有付费的Java学习课程？使用AWS ElastiCache，请求中的交叉插槽键不会散列到同一个插槽错误强化学习TD从后状态学习vue.js - TypeScript应该怎么学习？项目中如何使用TypeScript？

相关文档

Jims 的学习笔记周志华《机器学习》学习笔记机器学习动手学深度学习 v1学习敏捷数据科学
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.