//父组件
<template>
  <div>
    <div style="float: left">
      <input-data :city="city"></input-data>
    </div>
    <div style="float: right">
      <input-data :fonTer="fonTer"></input-data>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import inputData from '../components/common/input'
  export default{
      data(){
          return{
              msg:'请输入',
              city:['深圳','广州','上海','北京','香港'],
              fonTer:['第一个爱人','第二个爱人','第三个爱你']
          }
      },
     components:{
       inputData
     }
  }
</script>

<style>

</style>

//1.子组件：

<template>
  <div>
    <section>
      <input type="text" value=""/>
      <input type="buttom" value="查询"/>
    </section>
    <div>
      <select-drop :city="city"></select-drop>
    </div>
    <div>
      <select-drop :fonTer="fonTer"></select-drop>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import selectDrop from '../common/select';
   export default{
       data(){
           return{}
       },
      components:{
        selectDrop
      },
     props:['city','fonTer'],
     created(){}
   }
</script>

<style>

</style>

//2.细分小组件：

<template>
　　　　
  <div>

    <ul>
      <li v-for="item in city">{{item}}</li>
      <li v-for="item in fonTer">{{item}}</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return{}
        },
      props:['city','fonTer'],
      created(){

      }
    }
</script>

<style>

</style>