v-model 使用总结

v-model 使用总结

背景：在封装公司业务组件时遇到的v-model报错情况，解决之后的总结。

第一种情况：

// app.vue

<template>
  <div id="app">
    <cus-div v-model="cusValue" />
    <p>app-content:{{ cusValue }}</p>
  </div>
</template>

<script>
import CusDiv from './components/v-model/cus-div.vue'

export default {
  name: "app",
  components:{CusDiv},
  data() {
    return {
      cusValue:''
    };
  },
};
</script>

在app.vue 中 v-model 绑定的是字符串（简单数据类型）。记住这儿会是后面的差异点，也是总结的地方。

//cus-div.vue 

<template>
  <div class="div">
    <input type="text" v-model="value" />
    <p>div-content:{{ value }}</p>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
};
</script>

已经报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “value”

思考为什么：

报错的原因是：不能直接改变props中的值。这儿咋一看确实没有方法去直接赋值修改，但是，cus-div中的使用了v-model，问题就在这儿出现了。v-model是一个语法糖，其中有个潜在的事件被触发时对应的方法中会修改value，而这个时候这个报错就符合描述了。

解决方法：很简单，控制台已经明确告诉我了。使用data或者计算属性。解决之后代码如下：

//cus-div.vue

<template>
  <div class="div">
    <input type="text" v-model="v" />
    <p>div-content:{{ value }}</p>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      v: this.value,
    };
  },
    watch:{
        v(){
            this.$emit('change',this.v)
        }
    }
};
</script>

第二种情况：

其实第一种情况不是我写这个笔记来记录的原因，第二种情况才是值得记录下来并防止年纪把我带偏。

//app.vue

<template>
  <div id="app">
    <cus-div v-model="cusValue" />
    <p>app-content:{{ cusValue.name }}</p>
  </div>
</template>

<script>
import CusDiv from './components/v-model/cus-div.vue'

export default {
  name: "app",
  components:{CusDiv},
  data() {
    return {
      cusValue: {
        name:''
      }
    };
  },
};
</script>

v-model绑定的值的类型发生了改变，不是简单的数据类型了，是对象。

好了，再来看看子组件的代码，简单的不敢让人相信

// cus-div.vue

<template>
  <div class="div">
    <input type="text" v-model="value.name" />
    <p>div-content:{{ value.name }}</p>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
  },
  props: {
    value: {
      type: Object,
      default: function(){
          return {}
      }
    },
  },

};
</script>

没有data,computed去解决第一种情况出现的问题。并且没有自定义v-model需要的事件来传递数据。

这两种在浏览器呈现的结果是一模一样的。

疑问就来了，Why ?

不同在于v-model绑定的数据类型。简单数据类型就是实实在在的数据在这个栈的某个地方。对象，存放的是一个地址，地址是指向堆中的某个地方。前面说个子组件中的v-model的方法会潜在的改变绑定值,此时依旧改变了但是对于子组件的props中的value的值是没有改变的,所以并没有出现上面的错误。