Vue — v

一、v-model原理 原理:v-model本质上是一个语法糖。例如在inpu中,就是value属性和input事件的合写 作用:提供数据的双向绑定 双向绑定

一、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>

 

标签: 绑定 表单