zoukankan      html  css  js  c++  java
  • vue父组件向子组件传对象,不实时更新解决

    vue报错:void 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:

    看了很多大佬的方法,恕我直言,没有一个有用的,试了两天没什么用;

    最后唯一的解决办法就是父子双向传参解决,话不多说,代码如下:

     // 父组件引用
     <hi-popSelect :isShow="isShow" @func="getMsg"></hi-popSelect>  

      import popSelect from '../components/popSelect';
      
       components: {
         'hi-popSelect': popSelect
       },
       data(){
        return {   
        isShow: false
         }   
       }
     
      methods: {
       getMsg (data) {
        this.isShow = data;
       },
      }
     
     
       子组件:(我用的是elements的dialog对话框为例)
      
      <el-dialog class="hi-dialog"
      :visible.sync="currentIsShow">
      </el-dialog>
      
      
      // 父子传参(父传子)
      props: ['isShow'],
      data(){
       return {
        currentIsShow: this.isShow, // 在data里重新赋值,不改变父组件传值
       }
      }
     
      
      watch: {
      // 监听父组件传参变化重新赋值
       isShow (val) {
         this.currentIsShow = val;
        }
      },
     
        methods: { 
       // 关闭对话框并把值传给父组件 (子传父)
       hideData () {
        this.$emit('func', this.currentIsShow);
       },
      }
     以上方法完美解决问题,如有更好的解决方法请大佬在下方留言,十分感谢!

  • 相关阅读:
    react 组件传值
    vue 子组件如何修改父组件data中的值??????????????????
    移动端的一些初始化 css 样式。。。
    centos7命令
    poi导出
    eclipse项目导入工作空间提示已存在问题
    maven jar包冲突问题
    layui下拉框渲染问题,以及回显问题
    两个线程交替运行——使用synchronized+wait+notify实现
    造成索引失效的情况
  • 原文地址:https://www.cnblogs.com/myfate/p/11416829.html
Copyright © 2011-2022 走看看