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 是单向的数据流, 即 改变父组件中的值, 可以影响子组件的值, 但是改变子组件的值, 父组件的值不变.
来源: https://www.cnblogs.com/fandong90/p/10674195.html