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 是单向的数据流，即 改变父组件中的值，可以影响子组件的值，但是改变子组件的值，父组件的值不变。