Vue 子组件向父组件传递数据，父组件更新数据后，子组件模板第一次更新，之后不再更新 问题解决方案

如题

需求：

• 将input 限制在 1-99 之间

子组件向父组件发送数据

//子组件文本框
<input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/>
//maxlength="2" 将数据限制在两个字符内,初步限制不会超过99
//向父组件传递数据
methods: {
          changeNum(id, $event) {
            this.$emit('change-num', {
              id,
              num: $event.target.value,
              type: 'change',
            });
          },
		}

父组件对数据的处理

//子组件的使用
<shop-cart-list :list="list" @list-del="listDel($event)" @change-num="changeNum($event)"></shop-cart-list>

//对数据的处理
methods: {
          changeNum(val) {
            if (val.type == 'change') {
              this.list.find((item) => {
                if (item.id === val.id) {
                  //将数据进行了处理,不能为非数字或者 <= 0，如果是就赋值为 1
                  val.num > 0 ? val.num : (val.num = 1);
                  //解决方案就是将父组件的数据进行改变，在重新赋值，数据改变，页面重新更新
                  val.num == item.num ? (item.num = 999) : '';
                  this.$set(item, 'num', val.num);
                }
              });
            }
          }
      	}

大致思路：
当子组件连续多次传递非法的数据,会导致子组件的数据和父组件的数据一致，数据不变化页面不更新，而我的页面没有使用v-model进行双向绑定，而是使用的:value来控制页面的数据显示，所以页面显示的是当前输入的非法数据，没有改变。

后面了解到官方提供了解决方案：

changeCount() {
      let val = +parseInt(this.$refs.input.value);
      if (val < 1 || !val) val = 1;
      // 这个函数是用来强制更新用的，用了这个问题就解决了
      this.$forceUpdate();
      this.$emit('changeCount', val);
    },