vue 父子组件通过v-model实现数据双向绑定

场景

父组件调用子组件，需要实现子组件里的数据改变之后父组件能够监听到并且同时改变；

在子组件销毁之后重新调用时，把父组件监听到变化的值再绑定到子组件上；

类似微博评论功能在评论框中输入评论之后，关闭评论框，重新打开评论框会有之前输入的内容。

实现

父组件

<replyBox v-model="replyText"></replyBox>

通过v-model="replyText"，replyText为需要与子组件绑定的数据，子组件的值改变之后replyText会相应的改变，父组件replyText对应子组件props中的replyText

子组件replyBox

子组件设置model{},并且监听输入框变化向父组件派发事件，父组件通过v-model向子组件传入值实现双向绑定

model中prop代表和props的那个变量相对应

event表示着事件，触发事件的时候会改变父组件v-model绑定的值

<template>
  <div class="reply-box" @touchmove.prevent>
    <div class="mu-overlay" @click="remove"></div>
    <div class="content mu-background-color">
      <textarea id="text-box" ref="replyInput" v-model="text" class="reply-input mu-input mu-background-greycolor" placeholder="写回复"></textarea>
      <div class="footer">
        <i class="tsfont-attachment"></i>
        <div class="submit" :class="text? 'mu-primary-text-color' : 'mu-icon-text-color'">
          <span @click="empty">清空</span>
          <span @click="reply">回复</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'ReplyBox',
  components: {},
  model: {
    prop: 'replyText', //prop代表和props的那个变量相对应
    event: 'changeText' //event表示着事件，触发事件changeText的时候会改变父组件v-model的值
  },
  props: {
    replyText: {
      type: String,
      default: ''
    }
  },
  data() {
    const _this = this;
    return {
      text: _this.replyText
    };
  },
  watch: {
    text(newVal) {
      this.$emit('changeText', newVal);
    }
  }
};

以上，如有不对，欢迎指正。