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);
   },
  }
 以上方法完美解決問題,如有更好的解決方法請大佬在下方留言,十分感謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM