vue自定义组件时常见的一个报错解决办法

ztj100 2024-10-27 18:36 16 浏览 0 评论

在写vue组件时，我们会遇到这样一个警告信息：[Vue warn]: 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"。

错误的原因是，父组件通过prop传值给子组件，当子组件内部该值发生变化时就会出现这个问题。我们解决办法的思路如下：

我们在父组件中传value值给子组件，然后子组件中通过prop接收，然后我们在data中重新定义一个新值value1来接收prop传过来的value，后续我们修改value1就可以了。

// 父组件传值value
<auto-customer :value="val" @change="onchange"></auto-customer>

//子组件
<el-select 
    v-model="value1" 
    placeholder="请选择" 
    clearable
    @change="onChange">
    <el-option  v-for="item in options"  :key="item" :label="item" :value="item"></el-option>
</el-select>

export default {
    props: {
      value: ''  // 子组件通过prop接收父组件
    },
    data () {
      return {
        options: [],
        value1: this.value  //关键操作用新值接收value
      }
    },
    methods: {
      onChange(val) {
        if(val) {
          this.$emit('select', val) 
        }else{
          this.value1 = "" 
          this.$emit('select', "")
        }
      }
    }
  }

但是通过实践，在选择下拉框时报错是没有了，但是父组件传新值子组件确没办法数据双向改变，所以我们需要加一个数据监听操作：

watch: {
      value: {  
        immediate: true,  
        handler: function(val) {
          var that = this
          that.value1= val;  
        }  
      } 
}

这样我们会发现控制台没有了警告，大功告成，欢迎大家指导纠错。

vue dispatch

上一篇：自定义的拖拽式智能数据大屏(vue3 + echart +datav)
下一篇：Vue 3 进阶用法:事件的参数和校验

vue自定义组件时常见的一个报错解决办法

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

vue自定义组件时常见的一个报错解决办法

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起