Uniapp中關於props的傳參問題

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
可以看到展示數據
1.data定義的變量包含函數,函數屬性直接被刪除了
2.data定義的函數變量,可以正常傳遞
3.method定義的函數,可以正常傳遞
總結:uniapp的prop傳遞的變量爲對象時,對象內部含有函數屬性,該函數屬性會直接被刪除
Vue中的測試截圖
在這裏插入圖片描述
Vue中是可以正常傳遞,找個時間研究下uniapp關於prop的源碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章