vue之v-model之间的那些事儿，前端

直接上干货

父级组件

<template>
    <demo v-model="demoModel"></demo>
    我是父级的值：{{demoModel}}
    <el-button type="primary" size="mini" @click="demoModel++">父级新增</el-button>
 </template>
 <script>
    export default {
      name: "parent",
      data() {
        return {
          demoModel: 100
        };
      }
    };
</script>

child组件

<template>
  <div>
    我是child：{{value}}--{{newval}}
    <el-button type="primary" size="mini" @click="add">child的新增</el-button>
  </div>
</template>
<script>
export default {
  name: "demo",
  model: { 
    prop: "value", // 这里的value和props中的value的值需要一致
    event: "events" // 用于通过this.$emit("events", ++this.newval);更新父级v-model的值
  },
  props: {
    value: { // 这里的value和model中的prop的值需要一致
      type: Number,
      default: 0
    }
  },
  watch: {
    value(val) { 
        // 过程子组件出发this.$emit("events", ++this.newval)
        // ===》更新父级
        // ===》父组件通过props更新子组件value，子组件需要监听，从而达到重新赋值给子组件值
      this.newval = val;
    }
  },

  data() {
    return {
    // 需要重新定义一个变量接收父级的value,
    // 原因:props中只能父级修改，向下传递(单向传递)，子组件是不能修改prop传递下来的值，改了你看看控制台！！！
      newval: 0 
    };
  },
  created() {
    this.newval = this.value;
  },
  methods: {
    add() {
      // 这里发现一个很有趣的问题++this.newval换成this.newval++，你看看
      // 清楚先加还是后加就略过哈，没什么的事
      this.$emit("events", ++this.newval); 
    }
  }
};
</script>

附上图：

我是child： {{value}}--{{newval}} 我是父级的值： {{demoModel}}

默认：demoModel: 100

点击“child按的新增” 按钮

点击“父级新增” 按钮

点赞区