Vue 父子組件傳值 props

     1、Vue 的渲染周期：

      

                          vue 如何實現響應式追蹤。

                  

 

　　　　　　父子組件通信有很多方式，今天單獨聊下props 的方式。我們通過查找官方文檔很容發現，props傳值有靜態和動態兩種傳值方式。

                  當然props 還提供許多驗證，使數據更加嚴謹。

                  在使用父子傳值時，出現了, 按照文檔說明，例如：

 

<template>
    <div v-if="data">{{parentName}}
        
        <input type="text"  v-model="parentName" />
    </div>
</template>

<script>
export default {
 props:{
     parentName:String 
 },
 data(){
    return {
        data:this.parentName
    }
 },
 
 beforeCreate(){
     console.log("child beforeCreate");
 },
 created(){
     console.log("child created"+this.parentName);
 },
 mounted(){
     console.log("child data Mounted"+this.parentName);
 },
 beforeMount(){
     console.log("beforeMount data"+this.parentName);
 },
 beforeUpdate(){
     console.log("beforeUpdate data"+this.parentName)
 }

}
</script>

<style>

</style>

父組件引用：

　　

<template>
    <div>    <child  :parent-name="name"/>
    <input   type="text" v-model="name" />
</div>
</template>

<script>
import child from './child.vue'
export default {
   components:{
       child
   },
   data(){
       return {
           name:"asda"
       }
   },
   beforeCreate(){
       console.log("parent beforeCreate")
   },
   created(){
       console.log("parent created")
       
   },
   beforeMount(){
       console.log("parent beforeMount")
   },
   mounted(){
       console.log(" parent mounted")
        this.name="hahshdf"
   }
}
</script>

<style>

</style>

　　突然想到，這個父子組件渲染的順序如何，如上述代碼，

　　

 

     如圖所示，渲染順序是從子組件先掛載后，父組件在掛載。這個渲染順序可以決定我何時傳值，比較。

     從執行渲染順序來說，給子組件的props 中賦值，應該在父組件掛載前，最好是在子組件創建前即 beforeCreate 方法后，賦值。 切不可在beforeCreate 賦值，會導致未定義錯誤。

    如果在父組件掛載后，賦值會出現什么情況呢。

  沒錯，和你猜想的很對，會觸發子組件的更新事件，會導致局部在渲染。

  看文檔提示，一般的props 傳值，可以作為data（）方法的中return的初始值使用，在作為初始值使用時，切記

data(){
    return {
        data:this.propsValue
        }
   }

　　這個是從新返回一個新值，this.propsValue 改變不會再影響data 的值。

     最后說一句，現在vue 是單向的數據流，即 改變父組件中的值，可以影響子組件的值，但是改變子組件的值，父組件的值不變。