Vue2基础知识：v-model在组件传值中的使用，表单组件如何封装，如何用v-model简化父传子，子传父。（本文章只适用于vue2,vue3环境不一样语法不同）

要想要了解v-model在组件传值中如何使用首先得先了解表单组件如何封装

数据在父组件那里，表单结构在子组件那里。

1.表单组件如何封装

1.父传子：数据 应该是父组件props传递过来的，v-model拆解绑定数据。（为什么说是拆解呢？因为不可以直接v-model绑定，子组件只能改变自己的值，不能改变父组件的值）

2.子传父：监听输入，子传值给父组件修改。

下面通过代码进行具体演示：

1.完成父传子，

注意：子组件绑定的时候不能用v-model，子组件只能改变自己的值，不能改变父组件的值，而v-model会修改父组件的值，会报错。

完成父传子时的效果：

2.完成子传父

完成子传父时的效果：

2.在父组件v-model简化代码，实现子组件和父组件数据双向绑定。

步骤：分为两步：

1.子组件中：props通过value接收，事迹触发input(注意value和input都是固定的，不能改变)

2.父组件中：v-model给组件直接绑定数据（v-model=:value+@input）

下面进行代码演示：

完成简化后的效果：

3.最后附上代码：

App.vue(父组件)

<template>
  <div class="app">


    <!-- <BaseSelect :cityId="selectId"
    @changeId="selectId=$event"></BaseSelect> -->


    <!-- 上面是原先的代码 -->
    <BaseSelect v-model="selectId"></BaseSelect>
    <!-- v-model等价与:value和@input -->
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '103',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue（子组件）

<template>
  <div>
    <select :value="value" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props:{
    // 这里就必须是value
    // cityId:String
    // 上面是原先的代码
    value:String
  },
  methods:{
    handleChange(e){
      // console.log(e.target.value)
      //下面开始子传父
      // this.$emit('changeId',e.target.value)
      this.$emit('input',e.target.value)

    }
  }
}
</script>

<style>
</style>