Vue2实现组件props双向绑定

下面我将详细讲解如何在Vue2中实现组件props的双向绑定。

1. Vue2中props的单向绑定

Vue2中的props是单向绑定的，即父组件可以向子组件传递数据，但是子组件不能直接修改父组件传递的props。在子组件中默认情况下只能读取父组件传递的props值，如果想要修改这些值，需要通过事件的形式在子组件中触发父组件传递的方法来实现。

下面是一个示例，父组件通过props向子组件传递了一个名为"count"的属性，子组件可以读取这个属性的值，并在点击按钮时通过$emit事件向父组件传递一个"add"事件告诉父组件要对count值加1。

父组件模板：

<template>
  <div>
    <ChildComponent :count="parentCount" @add="parentAdd"></ChildComponent>
  </div>
</template>
<script>
  import ChildComponent from 'ChildComponent'
  export default {
    data () {
      return {
        parentCount: 0
      }
    },
    methods: {
      parentAdd() {
        this.parentCount++
      }
    }
  }
</script>

子组件模板：

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="buttonClicked">+</button>
  </div>
</template>
<script>
  export default {
    props: {
      count: Number
    },
    methods: {
      buttonClicked() {
        this.$emit('add')
      }
    }
  }
</script>

2. 使用v-model指令实现props的双向绑定

如果要在Vue中实现props的双向绑定，可以使用v-model指令，v-model其实就是语法糖，它可以同步input或者textarea组件上的数据到组件props中，也可以同步props中的值到input或者textarea中。但需要注意的是，v-model只能用在组件的"model"选项里，并且这个组件必须是使用props进行了"prop"特性的双向绑定。

下面是一个使用v-model指令实现props双向绑定的示例，我们创建了一个子组件"InputNumber"，这个组件中包含一个Number类型的props，同时这个组件也使用了v-model指令将input组件的value属性和props中的value值进行双向绑定。

子组件模板：

<template>
  <div>
    <label>输入数字：</label>
    <input type="number" :value="value" @input="inputHandler" />
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: Number,
        default: 0
      }
    },
    methods: {
      inputHandler($event) {
        this.$emit('input', +$event.target.value)
      }
    }
  }
</script>

父组件模板：

<template>
  <div>
    <InputNumber v-model="parentCount"></InputNumber>
    <p>当前数字： {{ parentCount }}</p>
  </div>
</template>
<script>
  import InputNumber from 'InputNumber'
  export default {
    components: {
      InputNumber
    },
    data () {
      return {
        parentCount: 0
      }
    }
  }
</script>

这样，当我们在InputNumber组件中输入一个数字时，父组件中的parentCount也会同步更新。同样，当父组件中的parentCount值改变时，InputNumber组件中的输入框的值也会同步更新。