实现vue父子组件中数据双向绑定

第一版

实现思路如下：

1. 父组件通过props向子组件传递数据，并向子组件提供一个方法更新自己的数据。
2. 子组件中当数据更新时，调用父组件提供的方法，将更新之后的数据传递给父组件。

// 父组件 app.vue
<template>
  <my-input :msg="msg" :updateMsg="updateMsg"/>
</template>
<script>
import myInput from './my-input.vue';
export default {
  name: 'app',
  components: { myInput },
  data () {
    return { msg: '' }
  },
  methods: {
    updateMsg (msg) {
      this.msg = msg;
    }
  }
}
</script>

// 子组件 my-input.vue
<template>
  <div>
    <input type="text" :value="msg" @input="e => this.updateMsg(e.target.value)">
  </div>
</template>
<script>
export default {
  name: 'my-input',
  props: {
    msg: String,
    updateMsg: Function
  }
}
</script>

第二版

实现思路如下：

1. 父组件通过props向子组件传递数据，并监听子组件emit的事件，在emit事件的回调中更新自己的数据。
2. 子组件中当数据更新时，向父组件emit一个事件，将更新之后的数据传递给父组件。

// 父组件 app.vue
<template>
  <my-input :msg="msg" @input="msg => this.msg = msg"/>
</template>
<script>
import myInput from 'my-input.vue';
export default {
  name: 'app',
  components: { myInput },
  data () {
    return { msg: '' }
  }
}
</script>

// 子组件 my-input.vue
<template>
  <input type="text" :value="msg" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  name: 'my-input',
  props: { msg: String }
}
</script>

第三版

实现思路如下：

1. 父组件通过props向子组件传递数据，使用vue指令v-model实现父子组件数据的双向绑定。
2. 子组件中当数据更新时，向父组件emit一个input事件，将更新之后的数据传递给父组件。

// 父组件 app.vue
<template>
  <my-input :msg="msg" v-model="msg"/>
</template>
<script>
import myInput from './my-input.vue';
export default {
  name: 'app',
  data () {
    return { msg: '' }
  }
}
</script>

// 子组件 my-input.vue
<template>
  <input type="text" :value="msg" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  name: 'my-input',
  props: ['msg']
}
</script>