Vue中作用域插槽的简单使用

效果:

公共组件:

javascript 复制代码
<template>
  <div class="colorTimeTemplate">
    <div>123</div>

    <div class="colorTimeTemplate-upload">
      <slot name="uploadBox"></slot>
    </div>

    <div>
      321
    </div>
  </div>
</template>

<script>
  export default {
    name: 'colorTimeTemplate',
    components: {},
    props: {},
    data() {
      return {
        colorTimeForm: {}
      }
    },
    methods: {},
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>

</style>

使用:

javascript 复制代码
  import colorTimeTemplate from './colorTimeTemplate'
  components: {colorTimeTemplate},




    <div v-if="parseInt(formData.programType) === 3">
      <colorTimeTemplate ref="colorTimeTemplate">
        <template slot="uploadBox">图片</template>
      </colorTimeTemplate>
    </div>

    <div v-if="parseInt(formData.programType) === 4">
      <colorTimeTemplate ref="colorTimeTemplate">
        <template slot="uploadBox">视频</template>
      </colorTimeTemplate>
    </div>
相关推荐
麦麦大数据34 分钟前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区2 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗2 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长2 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅3 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_3 小时前
Chrome开发者工具
前端·chrome
YiHanXii3 小时前
this 输出题
前端·javascript·1024程序员节
楊无好3 小时前
React中ref
前端·react.js
维他命Coco3 小时前
js常见开发学习
javascript
程琬清君3 小时前
vue3 confirm倒计时
前端·1024程序员节