当前位置:首页 » 《随便一记》 » 正文

【Vue2.0】—默认插槽、具名插槽、作用域插槽(二十四)_m0_46374969的博客

5 人参与  2022年05月06日 18:07  分类 : 《随便一记》  评论

点击全文阅读


【Vue2.0】—默认插槽、具名插槽、作用域插槽(二十四)

在这里插入图片描述

默认插槽、具名插槽

Cateory.vue文件

<template>
  <div class="cateory">
    <h3>{{title}}分类</h3>
    <!-- 定义一个插槽,等着组件的使用者进行填充 -->
    <slot name="center"> 我是一个默认值,当使用者没有传递具体结构的时候,我就会显示1</slot>
    <slot name="bottom"> 我是一个默认值,当使用者没有传递具体结构的时候,我就会显示2</slot>
  </div>
</template>
<script>
  export default {
    name: 'Cateory',
    props: ['title'],
  }
</script>

<style>
  .cateory {
    background-color: skyblue;
    width: 200px;
    height: 300px;
    float: left;

  }

  .cateory:nth-child(2) {
    margin: 0 50px;
  }

  h3 {
    text-align: center;
    background-color: orange;

  }

  ul li {
    list-style-type: none;
  }

</style>

App.vue文件

<template>

  <div class="container">
    <Cateory title="美食">
      <img slot="center"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bddd5e26a262a801216518af424f.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640156153&t=2c7b79467b177bea9e440f6639767be5"
        alt="">
      <a slot="bottom" href="#">点我可以跳转</a>
    </Cateory>


    <Cateory title="游戏">
      <ul slot="center">
        <li v-for="(g,index)  in games" :key="index">{{g}}</li>
      </ul>

      <!-- 注意:只有遇到template时,才可以使用v-slot这种写法 -->
      <template v-slot:bottom>
        <div class="footer">
          <a href="#"> 一起来玩王者吗</a></p>
          <a href="#"> 一起来玩LOL吗</a></p>
          <a href="#"> 一起来玩吃鸡吗</a></p>
        </div>
      </template>

    </Cateory>


    <Cateory title="电影" :listData="films">
      <img slot="center" class="cake"
        src="http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F69%2F17%2Ff2%2F6917f22462051746bd24feb853631904.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640156853&t=d9e20e3e8709b53daba8f576454a1826"
        alt="">
      <a slot="bottom" href="#">小黑的日常生活</a>
    </Cateory>
  </div>
</template>

<script>
  import Cateory from './components/Cateory.vue'
  export default {
    name: 'App',
    components: {
      Cateory
    },
    data() {
      return {
        food: ['火锅', '小龙虾', '牛排'],
        games: ['王者荣耀', 'LOL', '吃鸡'],
        films: ['《门锁》', '《最好的我们》', '《新年好》']
      }
    }
  }

</script>

<style lang="css">
  img,
  .cake {
    width: 200px;
    height: 200px;
  }

</style>

作用域插槽

理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定,(games数据在Category组件中使用,但使用数据所遍历出来的结构由APP组件决定)

Cateory.vue文件
在这里插入图片描述
App.vue文件
在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/39617.html

插槽  组件  使用者  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 全书浏览重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)_重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)全书结局
  • 他的甜撩藏不住附加黎初谢时晏:结局+番外免费品鉴(他的甜撩藏不住)全本浏览阅读连载中
  • 全文他死遁后逼疯清冷女权臣+完结+后续(苏煜顾宛柔)列表_全文他死遁后逼疯清冷女权臣+完结+后续
  • 暑假毕业旅游,班花将我们身份证交给黑导游(江诗晗)全书浏览_暑假毕业旅游,班花将我们身份证交给黑导游全书浏览
  • 重生到高考前,我放任竹马为爱私奔新上热文_裴文远柳雨文远完结版_小说后续在线阅读_无删减免费完结_
  • 雨织离歌浮生浅节选_沈翊鸣苏之雨小姐完整文本_小说后续在线阅读_无删减免费完结_
  • 鬓边不是牡丹红精选(盛惟芳萧既明贺锦)_鬓边不是牡丹红精选盛惟芳萧既明贺锦
  • 宋岑月傅忠焜:结局+番外免费品鉴:结局+番外评价五颗星
  • 桑榆非晚半春休,姜晚榆沈淮遇完本_完本桑榆非晚半春休,姜晚榆沈淮遇
  • 大逃杀游戏老公一千万赌我死人气节选(萧铎纪云笙白茵茵)全书浏览_大逃杀游戏老公一千万赌我死人气节选全书浏览
  • 黎初谢时晏(他的甜撩藏不住)后续+番外精编之作_黎初谢时晏(他的甜撩藏不住)免费在线阅读无删减_笔趣阁
  • 把自己上交国家,龙神崽崽旺全国龙小小小说整本+后续(龙小小)清爽版阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1