關於Vue父子組件傳值(復雜數據類型的值)的細節點

vue 父子組件傳值是很常見的，多數情況下都是父傳遞給子的值是基礎數據類型，如string,number,boolean，

當父組件值被修改時，子組件能夠實時的作出改變。

如果父子傳值的類型是復雜數據類型（object,array）這種時，

1.通常的做法是在子組件監聽props屬性

<!--父組件-->
<div class="parent">
    <!--子組件-->
    <child :val="val"></child>
</div>

<script>
    export default {
       data(){
            return {
                val:{
                      name:'name',
                      age:'18'
                } 
           }
　　　　}
    }
</script>            

<! 子組件監聽props>
<div class="child">
   {{val.name +":"+ val.age}}
</div>

<script>
    export default {
       props:'val',
       data(){ return {}},
     watch:{
       val:{
          handle(newVal){
              console.log(newVal)
           },
          deep:true
        }
     }
    }

</script>

細節點：這里監聽到父組件的值被修改時，不要在回調里再對此值做修改操作，否則提示報錯，並進入死循環導致瀏覽器gg

2.還有一種做法是在父組件修改，避免進坑

官方文檔有說明https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

 

 本人除了做前端開發，還在公眾號寫點文章，歡迎用共同興趣愛好的朋友關注下，交個朋友噢！