Vue CLI中插槽的使用

最新推荐文章于 2023-04-06 10:50:59 发布

爬行者c

最新推荐文章于 2023-04-06 10:50:59 发布

阅读量225

点赞数

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

本文链接：https://blog.csdn.net/weixin_43594183/article/details/116985943

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文深入介绍了Vue.js组件中的插槽机制，包括默认插槽（匿名插槽）、具名插槽和作用域插槽的使用方法。通过实例展示了如何在父组件中自定义内容并插入到子组件的相应位置，以及如何访问和操作子组件的数据。这对于理解Vue.js组件间的通信和定制化内容展示至关重要。

摘要由CSDN通过智能技术生成

插槽作用

在父组件中将自定义内容插入到子组件中。

单个插槽

也叫匿名插槽、默认插槽，插槽名默认为default。

子组件<slot></slot>

父组件自定义内容

具名插槽

多个插槽，定义的内容会被传入相应的插槽。

父组件：

在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称v-slot:name

子组件：

<slot name=""></slot>

作用域插槽

能够访问子组件中的内容，替换掉子组件中的备用内容。

父组件：

<template v-slot:default="slotProps">

{{ slotProps.user.firstName }}

</template>

子组件：

<slot v-bind:user="user"></slot>

注意：

默认作用域插槽（独占默认插槽）可以直接把v-slot放到组件上

    <current-user v-slot="slotProps">

      {{ slotProps.user.firstName }}

    </current-user>

默认插槽和作用域插槽不能混用，出现多个插槽，所有的都要基于 <template> 语法。

实例

父组件

<div class="list list-project">
    <!-- 使用组件 -->
    <common-list  :list="dataList"  :showPublisher="true">
    <!-- 具名插槽  v-slot:name  可以简写#name  progressFlag 临时变量 -->
    <template v-slot:progress="progressFlag">
        <div  class="list-progress flex flex-justify-between sys-flex-center" :class="'list-progress'+progressFlag.item.status">
        <div class="progress-text">{{progressFlag.item.status_show}}</div>
        <div class="progress-bar">
            <div class="progress-status" :style="'width:'+progressFlag.item.percent+'%'"></div>
        </div>
        <div class="progress-percent">{{Math.ceil(progressFlag.item.percent)}}%</div>
        </div>
    </template>
    </common-list>
</div>
<script>
import commonList from '../list'
export default {
  name: 'contentPlot',
  data () {
    return {
      dataList: [],
    }
  },
  components: {
    'common-list': commonList
  }
}
</script>

子组件

<template>
<div class="news-list flex sys-vertical flex-justify-around">
  <div class="list-item flex sys-flex-center  animated"  v-for="(item,index) in list" :key="index" :class="{'flipInX' : item.title}" :style="{'animation-delay' : index/4+'s'}">
    <div class="title overhidden"><span class="icon-index" :class="'icon-index'+index" v-if="showIndex">{{index+1}}</span>{{item.title}}</div>
    <div class="name" v-if="showPublisher">{{item.create_user_name}}</div>
    <!-- 子组件命名插槽 传递数据 -->
    <slot name="progress" :item="item"></slot>
    <div class="time" v-if="showTime">{{item.update_time | dateFormat}}</div>
    <div class="click-num" v-if="showNum">{{item.click_num}}</div>
  </div>
</div>
</template>
<script>
export default {
  name: 'commonList',
  props:['showIndex','list','showNum','showPublisher','showTime'],
  data () {
    return {   
    }
  },
  methods: {
  }
}
</script>