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

 效果：

公共组件：                        

 
<script>
  export default {
    name: 'colorTimeTemplate',
    components: {},
    props: {},
    data() {
      return {
        colorTimeForm: {}
      }
    },
    methods: {},
    created() {
    },
    mounted() {
    }
  }
script>
 
<style lang="scss" scoped>
 
style>

使用：

  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>