v-model原理:父组件、子组件使用v-model

父组件、子组件实现下拉框
使用v-model的
父组件代码：

<template>
  <div id="app">
      <SelectOne v-model="cityId"></SelectOne>
  </div>
</template>
<script>
import SelectOne from './components/SelectOne.vue'

export default {
  name: 'App',
  components:{
    SelectOne
  },
  data(){
    return{
      cityId:102
    }
  }
}
</script>
<style scoped>
</style>

子组件

<template>
  <select :value='value' @change="fn">
    <option value="101">北京</option>
    <option value="102">东京</option>
    <option value="103">南京</option>
    <option value="104">西京</option>
  </select>
</template>

<script>
export default {
    props:{
        value:Number
    },
    methods:{
        fn(e){
            this.$emit('input',parseInt(e.target.value));
        }
    }
}
</script>

<style>

</style>

运行结果：

不使用v-model的，子组件

<template>
  <select :value='cityId2' @change="fn">
    <option value="101">北京</option>
    <option value="102">东京</option>
    <option value="103">南京</option>
    <option value="104">西京</option>
  </select>
</template>

<script>
export default {
    name:'SelectTwo',
    props:{
        cityId2:Number
    },
    methods:{
        fn(e){
            this.$emit('changeCityId',parseInt(e.target.value));
        }
    }
}
</script>

<style>

</style>

父组件：

<template>
  <div id="app">
      <SelectTwo :cityId2="cityId2" @changeCityId="fn"></SelectTwo>
  </div>
</template>
<script>
import SelectTwo from './components/SelectTwo.vue'
export default {
  name: 'App',
  components:{
    SelectTwo
  },
  data(){
    return{
      cityId2:103
    }
  },
  methods:{
    fn(cityId2){
      this.cityId2 = cityId2;
    }
  }
}
</script>
<style scoped>
</style>

运行结果：