v-model引见

熟习Vue的小伙伴们都晓得 v-model 是Vue的一个很大的特征，能够完成双向数据绑定。但本质上呢，它不过是语法糖，它担任监听用户的输入事宜以更新数据。
以下摘取自Vue官方文档

v-model 在内部应用差别的属性为差别的输入元素并抛出差别的事宜：

• text 和 textarea 应用 value 属性和 input 事宜；
• checkbox 和 radio 应用 checked 属性和 change 事宜；
• select 字段将 value 作为 prop 并将 change 作为事宜。

怎样奇妙应用 v-model完成父子组件传值

一般子组件某个变量更新，并须要示知父组件时，须要子组件触发事宜并父组件监听该事宜。

然则熟习上面 v-model 的完成道理后，我们能够奇妙地应用这一道理（v-model 在内部应用差别的属性为差别的输入元素并抛出差别的事宜）。

要领总结：

• 1.子组件设 value 为props属性，而且不主动转变 value 值
• 2.子组件经由历程 this.$emit('input', 'updateValue') 将 updateValue 值传给父组件
• 3.父组件经由历程 v-model="localValue" 绑定一个当地变量，即可完成子组件value值与父组件updateValue 值同步更新

举例

子组件

子组件，包括一个button，而且将 value 属性设为props（ 由于v-model应用的是 value属性 ）。

点击button时，sum值加1，同时经由历程 this.$emit('input', ++sum) 将更新后的值传给父组件（条件：传给父组件的值一定是你想赋给 value 的）

<template>
  <div>
    <button @click="increase" style="border: 1px solid black">increase</button>
  </div>
</template>

<script>
let sum = 0
export default {
  name: 'vmodel',
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    increase () {
      this.$emit('input', ++sum)
      console.log('value1', this.value)
    
      setTimeout(() => {
        console.log('value2', this.value)
      }, 50)
    }
  }
}
</script>

父组件

父组件中，经由历程 v-model 绑定一个当地变量，即可完成子父组件同步更新

<div>
    <increase v-model="rangeValue"></increase>
    <p>value:{{rangeValue}}</p>
</div>

<script>
data () {
    return {
      rangeValue: 0
    }
}
</script>

实际上，这个历程是起首子组件经由历程 $emit('input') 更新父组件的当地变量，然后子组件中的 value 属性经由历程 props 得以更新

总结

这类体式格局特别适合子父组件传参的状况（子父组件同步更新）