vue插槽

最新推荐文章于 2024-09-24 10:01:00 发布

困在雨天

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量283

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44106237/article/details/126999583

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

插槽的使用 - 默认插槽

描述：默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。

插槽的使用 - 具名插槽

描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    
      li {
        list-style: none;
        width: 18%;
      }
    
      li img {
        width: 100%;
      }
      h2{
        text-align: center;
      }
    </style>
</head>
<body>
  <div id='app'>
    
    <courseclass :type="type11" page-size="10"> 
      😊😊😊😊😊😊
      <template v-slot:header>免费</template>
    </courseclass>
    <courseclass type="boutique">
      😍😍😍😍😍😍😍
      <template v-slot:header>精品</template>
    </courseclass>
    <courseclass type="discount">
      😁😁😁😁😁😁😁
      <template v-slot:header>付费</template>
    </courseclass>
  </div>
  <template id="course">
    <div>
      <slot></slot>
      <h2>
        <slot name="header"></slot> 课程
      </h2>
      <ul>
        <li v-for="item in courselist">
          <img :src="item.coverFileUrl" alt="">
          <div>{{item.courseTitle}} </div>
          <div> {{item.learningNum}}</div>
          <div>免费 </div>
        </li>
      </ul>
    </div>
  </template>

  <script>
    Vue.component('courseclass',{
      template:'#course',
      data(){
        return{
          courselist:[]
        }
      },
      props:{
        type:String,
        pageSize:Number,
        // pageSize:[Number,String],
        pageSize:{
          type:[Number,String],
          default(){
            return 5
          }        
        }
      },
      methods:{
        getCourseList(type='free',pageSize=5,pageNum=1){
          let formurl = new URLSearchParams()
          formurl.append('type',type)
          formurl.append('pageSize', pageSize)
          formurl.append('pageNum', pageNum)
          return axios.post('http://1.117.81.216:8086/weChat/applet/course/list/type',formurl)
        }
      },
      created(){
        this.getCourseList(this.type,this.pageSize,1).then(
          res=>{
            this.courselist= res.data.rows
          }
        )
      }
    })
  const vm = new Vue({
    el: '#app',
    data: {
      type11:'free'
    },
    methods: {
    },
  })
  </script>
</body>
</html>