Vue 父子组件传值 props

     一、Vue 的渲染周期：

      

                          vue 如何实现响应式追踪。

                  

 

　　　　　　父子组件通讯有不少方式，今天单独聊下props 的方式。咱们经过查找官方文档很容发现，props传值有静态和动态两种传值方式。

                  固然props 还提供许多验证，使数据更加严谨。

                  在使用父子传值时，出现了, 按照文档说明，例如：

 

 1 <template>
 2     <div v-if="data">{{parentName}}  3         
 4         <input type="text"  v-model="parentName" />
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default { 10  props:{ 11  parentName:String 12  }, 13  data(){ 14     return { 15         data:this.parentName 16  } 17  }, 18  
19  beforeCreate(){ 20      console.log("child beforeCreate"); 21  }, 22  created(){ 23      console.log("child created"+this.parentName); 24  }, 25  mounted(){ 26      console.log("child data Mounted"+this.parentName); 27  }, 28  beforeMount(){ 29      console.log("beforeMount data"+this.parentName); 30  }, 31  beforeUpdate(){ 32      console.log("beforeUpdate data"+this.parentName) 33  } 34 
35 } 36 </script>
37 
38 <style>
39 
40 </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 是单向的数据流，即 改变父组件中的值，能够影响子组件的值，可是改变子组件的值，父组件的值不变。