Uniapp中关于props的传参问题

末蓝、 2022-11-13 14:26 736阅读 0赞

uniapp中父组件向子组件传递prop时，如果prop是对象，对象内部不能包含function属性  
例子如下

father.vue
    <template>
        <view class="uni-container">
    		<child :fatherData="fatherData" :fatherFcuntion="fatherFcuntion" :fatherMethod="fatherMethod"></child>
    	</view>
    </template>
    <script>
    	import child from './child.vue'
    	export default { 
            components: { 
    			child
            },
            data() { 
                return { 
    				fatherData: { 
    					a: 1,
    					b: { 
    						isShow: function() { 
    							console.log("data定义对象属性函数");
    						}
    					}
    				},
    				fatherFcuntion: function() { 
    					console.log("data定义函数变量");
    				},
    			}
    		},
    		methods: { 
    			fatherMethod() { 
    				console.log("method的定义函数");
    			},
    		}
    	}
    </script>

child.vue

<template>
    	<view>
    		child
    	</view>
    </template>
    
    <script>
    	export default({ 
    		name: "child",
    		props: { 
    			fatherData: { 
    				type: Object,
    				default: function() { 
    					return { };
    				}
    			},
    			fatherFunction: { 
    				type: Function,
    				default: function() { 
    					return function() { }
    				}
    			},
    			fatherMethod: { 
    				type: Function,
    				default: function() { 
    					return function() { }
    				}
    			}
    		},
    		mounted() { 
    			console.log("父组件data定义的变量包含函数", this.fatherData);
    			console.log("父组件data定义的函数变量", this.fatherFunction);
    			console.log("父组件method定义的函数", this.fatherMethod);
    		}
    	})
    </script>

结果

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200702173033111.png][https_img-blog.csdnimg.cn_20200702173033111.png]

可以看到展示数据  
1.data定义的变量包含函数，函数属性直接被删除了  
2.data定义的函数变量，可以正常传递  
3.method定义的函数，可以正常传递  
总结：uniapp的prop传递的变量为对象时，对象内部含有函数属性，该函数属性会直接被删除  
Vue中的测试截图

Vue中是可以正常传递

原因  
uniapp中父组件进行初始化时，会经过

initMixin(Vue);
    stateMixin(Vue);
    eventsMixin(Vue);
    lifecycleMixin(Vue);
    renderMixin(Vue);

在initMixIn(Vue)中会执行

function initMixin (Vue) { 
      Vue.prototype._init = function (options) { 
      	.......
    	if (vm.$options.el) { 
          vm.$mount(vm.$options.el);
        }
      };
    }

\_init方法中的$mount函数如下

// public mount method
    Vue.prototype.$mount = function(
        el ,
        hydrating 
    ) { 
        return mountComponent$1(this, el, hydrating)
    };

mountComponent$1函数如下，会new Watcher，函数为updateComponent，函数updateComponent会执行\_update

在lifecycleMixin函数内部会定义一个\_update属性函数

Vue.prototype._update = function (vnode, hydrating) { 
        .......
        if (!prevVnode) { 
          // initial render
          vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
        } else { 
          // updates
          vm.$el = vm.__patch__(prevVnode, vnode);
        }
        ......
      };

\_update函数中有一个\_\_patch\_\_函数，主要比较newData与oldData的差异进行差量更新

上述有一个cloneWithData方法，最后会返回深度克隆的值，但是该方法会有问题，丢失value值为function的key，并且可能存在循环依赖问题。

function cloneWithData(vm) { 
      .....
      return JSON.parse(JSON.stringify(ret))
    }

上述可以看到，使用cloneWithData采用了JSON.parse(JSON.stringify(ret))，导致this中的data中会识别到对象如果包含function，会直接丢失到该属性，并且diff算法会识别到b:\{\}的差异，直接影响到子组件。

[https_img-blog.csdnimg.cn_20200702173033111.png]: /images/20221022/c67f344033fe4492bbaf4a36bf625149.png