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>

父组件引用：

　　

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<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的初始值使用，在作为初始值使用时，切记

?

1 2 3 4 5

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

　　这个是从新返回一个新值，this.propsValue 改变不会再影响data 的值。

     最后说一句，现在vue 是单向的数据流，即 改变父组件中的值，可以影响子组件的值，但是改变子组件的值，父组件的值不变。