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