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>

export const listFilters = [{
  title: '工作状态',
  type: 'tab',
  emit: '',
  contents: [
    {name:'all',text: '全部'},
    {name:'not-issued', text: '未完成'},
    {name: 'is-issued',text:'已完成'},
    {name: 'is-ended',text: '已结束'}
  ]
},{
  title: '工作时间',
  type: 'time',
  emit: '',
  contents: [
    { type:'tab',name:'all',text: '全部' },
    { type:'tab',name:'today', text: '今天' },
    { type:'tab',name: 'week',text:'一周内' },
    { type:'tab',name: 'week',text:'这个月' },
    { type:'custom',name:'custom',sv:'',ev:'' }
  ]
},{
  title: '来源类别',
  type: 'select',
  emit: '',
  contents: {
    options: [
      { label: '类型 1', value: 1 },
      { label: '类型 2', value: 2 },
      { label: '类型 3', value: 3 },
      { label: '类型 4', value: 4 }
    ],
    value: ''
  }
},{
  title: '网站名称',
  type: 'select',
  emit: '',
  contents: {
    options: [
      { label: '腾讯网', value: 1 },
      { label: '新浪网', value: 2 },
      { label: '网易网', value: 3 },
      { label: '凤凰网', value: 4 },
      { label: '搜狐网', value: 5 }
    ],
    value: ''
  }
},{
  title: '工作搜索',
  type: 'search',
  contents: {
    inputValue: ''
  }
}];

<template>
  <div class="filter-input-container">
    <!-- 最终可以动态调用所有组件 -->
    <component v-bind:is="'fi-'+v.type" :title="v.title" :contents="v.contents" v-for="v,i in listFilters" :key="i"></component>
  </div>
</template>
 
<script scoped>
 
  import {listFilters} from './scripts/filters.data.js';
 
  export default {
    data(){
      return {
        components:['fi-tab','fi-time','fi-select','fi-search','fi-input'],
        listFilters: listFilters
      }
    },
    props:{
      
    },
    methods:{
      
    },
    components:{
      'fi-search': () => import('../components/fi-search.vue'), //搜索表单
      'fi-tab': () => import('../components/fi-tab.vue'), // tab切换
      'fi-time': () => import('../components/fi-time.vue'), // 时间选择
      'fi-select': () => import('../components/fi-select.vue') // 选择下拉框
    }
  } 
</script>
 
<style scoped lang="stylus">
  @import './stylus/filter-input.styl'
</style>

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

<div>
  <box1></box1>
 </div>
</template>
 
<script>
import box1 from '@/components/box1'
export default {
 components: {'box1': box1},
}
</script>

<div id="example">
 <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
 template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
 el: '#example'
})

<div id="example">
 <div>A custom component!</div>
</div>