vue中props賦值給data出現的問題及解決

更新時間：2022年10月18日 10:33:50 作者：weixin_43848098

這篇文章主要介紹了vue中props賦值給data出現的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue props賦值給data問題

vue 中父組件向子組件傳遞數據用 props, 但是子組件是無法修改它的。

如果子組件需要動態(tài)修改它就只能自造一個對應的 data 域。

比如：

components:{Tinymce},
? props:['id','formDatas'],
? data() {
? ? return {
? ? ? form: {
? ? ? ? title: '',
? ? ? ? title_type: '',
? ? ? ? push_date: '',
? ? ? ? source: '',
? ? ? ? title_introduce: '',
? ? ? ? title_content:'',
? ? ? }
? ? }
? },
? created(){
? ? this.form = this.formDatas
? },

這樣是無法把props的值傳遞給data里面，因為data()只會運行一次，所以要用watch來進行監(jiān)聽props里面內容的變化，然后對data里面進行賦值

?watch:{
? ? formDatas(news,olds){
? ? ? this.form = news
? ? }
? }

因此當父組件傳遞值給子組件的時候，watch就會監(jiān)聽到formDatas的變化，將新的值賦給你想要傳值的data，然后進行改變。

props賦值給data 數據變化

問題：當組件props里的某個值（a）（a值要是對象引用類型的數據）賦給了data對象里的某個值 (b); 當a值發(fā)生了變化，b值還是最開始的a值, 但實際應該是b值是最新的a值

例如

<template>
  
</template>
 
<script>
export default {
    name:'child '
    props:{
        a:{
            type:Object
        }
    },
    data(){
        return{
            b:this.a
        }
    },
    mounted(){
        console.log("b",this.b) //打印出來是a:{a1:1}
        //a值改變后打印b值
         console.log("b",this.b) //打印出來還是a:{a1:1}
    }
}
</script>
 
<style>
 
</style>
<!-------------------------------------------------------->
<template>
   <!---引用子組件--->
  <child :a="a"></child>
</template>
 
<script>
export default {
    data(){
        return{
            a:{
                a1:1
            }
        }
    },
    mounted(){
        //改變a值
        this.a.a1 = 2
    }
    
}
</script>
 
<style>
 
</style>

原因：因為data深拷貝的props的值，data無法隨著props的變化而更新；

解決：watch、computed可以解決

<template>
??
</template>
?
<script>
export default {
? ? name:'child '
? ? props:{
? ? ? ? a:{
? ? ? ? ? ? type:Object
? ? ? ? }
? ? },
? ? data(){
? ? ? ? return{
? ? ? ? ? ? b:this.a
? ? ? ? }
? ? },
? ? watch:{
? ? ? ? a(val){
? ? ? ? ? ? //當a值變化時
? ? ? ? ? ? this.b = this.a
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? //a值改變后打印b值
? ? ? ? ?console.log("b",this.b) //打印出來就是最新值了 ? a:{a1:2}
? ? }
}
</script>
?
<style>
?
</style>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: