Vue — v-model详解

一、v-model原理

原理：v-model本质上是一个语法糖。例如在inpu中，就是value属性和input事件的合写

作用：提供数据的双向绑定

双向绑定：数据变，视图跟着变；视图变，数据跟着变

二、表单类组件封装&v-model简化代码

1.表单组件封装的核心思路：

（1）父传子 ： 数据从父组件使用prop传递给子组件渲染，子组件使用v-model拆解绑定数据

（2）子传父：监听输入方法，子传父传值给父组件修改

<template>
  <div class="app">
    <BaseSelect :cityId="selectId" @changeSelect="selectId = $event"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue';

export default {
  name: 'App',
  components: {
    BaseSelect
  },
  data(){
    return {
      selectId : '103'
    }
  },
  methods : {
    
  }
}
</script>

<style>

</style>

<template>
  <div>

    <select :value="cityId" @change="changeCity">
        <option v-for="item in list" :key="item.value" :value="item.value">
            {{ item.name }}
        </option>
    </select>

  </div>
</template>

<script>
export default {
    props : {
        cityId : String
    },
    data(){
        return {
            list : [
                {
                    value : '101',
                    name : '北京'
                },
                {
                    value : '102',
                    name : '上海'
                },
                {
                    value : '103',
                    name : '南京'
                },
                {
                    value : '104',
                    name : '广州'
                }
            ]
        }
    },
    methods : {
        changeCity(e){
            // console.log(e)
            this.$emit('changeSelect',e.target.value)
        }
    }
}
</script>

<style>

</style>

2.简化代码

（1）子组件：prop通过value接收，事件触发使用@input

（2）父组件：v-model直接绑定数据

<template>
  <div class="app">
    <!-- v-model == :value + @input -->
    <BaseSelect v-model="selectId"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue';

export default {
  name: 'App',
  components: {
    BaseSelect
  },
  data(){
    return {
      selectId : '103'
    }
  },
  methods : {
    
  }
}
</script>

<style>

</style>

<template>
  <div>

    <select :value="value" @change="changeCity">
        <option v-for="item in list" :key="item.value" :value="item.value">
            {{ item.name }}
        </option>
    </select>

  </div>
</template>

<script>
export default {
    props : {
        value : String
    },
    data(){
        return {
            list : [
                {
                    value : '101',
                    name : '北京'
                },
                {
                    value : '102',
                    name : '上海'
                },
                {
                    value : '103',
                    name : '南京'
                },
                {
                    value : '104',
                    name : '广州'
                }
            ]
        }
    },
    methods : {
        changeCity(e){
            // console.log(e)
            this.$emit('input',e.target.value)
        }
    }
}
</script>

<style>

</style>