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);
       },
      }
     以上方法完美解决问题,如有更好的解决方法请大佬在下方留言,十分感谢!

  • 相关阅读:
    Java运行环境(win10)
    maven封装jar包遇到的问题
    eclipse安装STS遇到的问题
    Redis IO多路复用的理解
    操作系统文章推荐
    jdk1.8新特性
    Maven笔记
    博主推荐
    MySQL文章推荐
    多线程文章推荐
  • 原文地址:https://www.cnblogs.com/myfate/p/11416829.html
Copyright © 2011-2022 走看看