Vue 에서 component 태그 해결 프로젝트 구성 요소 화 작업

<template>
  <div class="filter-input-container">
 
    <!--     -->
    <div class="filter-line">
      //...
    </div>
 
    <!--      -->
    <div class="filter-line">
      //...
    </div>
 
    <!--         -->
    <div class="filter-line">
      //...
    </div>
 
    <!--       -->
    <div class="filter-line">
      //...
    </div>
 
  </div>
</template>
 
<script scoped>
  import { DatePicker, Select, Option, Button, Input } from 'element-ui';
  export default {
    components:{
      'el-date-picker': DatePicker,
      'el-select': Select,
      'el-option': Option,
      'el-button': Button,
      'el-input': Input
    }
  } 
</script>
 
<style scoped lang="stylus">
  @import './stylus/filter-input.styl'
</style>

<template>
  <div class="filter-line">
    <section class="filter-line-title">{{title}}</section>
    <section class="filter-line-content">
 
       <span class="flc-span-wrap">
        
        <!--        -->
        <el-select v-model="contents.value" placeholder="   " :class="'selectBox'">
          <el-option
            v-for = "v,i in contents.options"
            :key = "i"
            :label = "v.label"
            :value = "v.value">
          </el-option>
        </el-select>
      </span>
 
    </section>
  </div>
</template>
 
<script scoped>
 
  import { Select, Option } from 'element-ui';
 
  export default {
    name: 'fi-select',
    data(){
      return {
        selectValue: ''
      }
    },
    props:{
      title:{
        type: String,
        default: '    '
      },
      contents:{
        type: Object,
        default:() => ({
          options: [
            { label: 'show option 1', value: 1 },
            { label: 'show option 2', value: 2 },
            { label: 'show option 3', value: 3 },
            { label: 'show option 4', value: 4 }
          ],
          value: ''
        })
      }
    },
    methods:{
 
    },
    components:{
      'el-select': Select,
      'el-option': Option
    }
  }
</script>

<template>
 <div class="hello">
  <h1>  </h1>
 </div>
</template>
 
<script>
export default {
 
}
</script>