vue 父子組件傳值數據不能實時更新問題


忘了什么時候了,遇到過這么一個坑:父子組件傳值,(子組件為動態創建)v-model好像沒有做到數據同步更新,這就頭大了。。業務需要嘛,可是自己又懶得想為什么,好吧..爬出坑就是硬道理,不要問why,我懶啊。

這里做個小筆記,萬一哪天一樣需要爬出坑的盆友,可以做個借鑒。具體直接上代碼

vue升級2.0

 

prop雙向綁定實效解決方案:

 

父組件
   <child :content='content' ></child>

 

子組件接收:

 

    props:['content'],

    data(){

        return{

           conData:this.content

        }

    },

    watch: {

        content: function (val) {

            this.conData = val

        },

        conData: function (val) {

            console.log(val)

            this.$emit('content', val)

        }

    }

 

 

 

將子組件要調用的方法,綁定到組件上,比如:

<child @sendChildData=“getChildData”></child>

 

子組件調用父組件方法:通過“$emit”

例如:

<el-button type="button" @click="testParentFns"></el-button>  // testParentFns子組件自己的方法

 

testParentFns(){

      this.$emit("sendChildData",'just test');  //sendChildData 父組件中往子組件傳遞方法標識 getChildData為父組件內定義獲取子組件數據的方法

}

 

 

父級接收到事件后,執行getChildData方法獲取數據並回顯。

 

getChildData(newData){

        this.data = newData;

 }


免責聲明!

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



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