【兼容uni-app】Vue之父组件如何调用子组件的属性和方法【参考$refs属性】【有坑....】

总结：$refs和生命周期有关【必须页面渲染完毕之后才能正常访问其内部的属性】父组件parent.vue<template><view><child ref="child"></child></view><...

比特币爱好者007

6609人浏览 · 2019-06-14 09:16:43

比特币爱好者007 · 2019-06-14 09:16:43 发布

总结：$refs和生命周期有关【必须页面渲染完毕之后才能正常访问其内部的属性】

父组件parent.vue

<template>
	<view>
		<!-- 这里的child可以随意取,但是必须唯一,在refs对象中 -->
		<child ref="child"></child>
	</view>
</template>

<script>
	import Child from "@/pages/test/child.vue"
	export default {
		created(){
			// 可以正常访问
			console.log("created",this.$refs)
			// 结果underfined
			console.log("created",this.$refs.child)
		},
		mounted() {
			// 这里的访问都是正常的【注：this.$refs必须父组件渲染完毕之后才能正常访问内部的属性或方法】
			console.log("mounted",this.$refs)
			console.log("mounted",this.$refs.child)
			console.log("mounted",this.$refs.child.name)
			console.log("mounted",this.$refs.child.age)
			console.log("mounted",this.$refs.child.getName())
		},
		components: {
			Child
		},
	}
	
</script>

<style>
</style>

子组件child.vue

<template>
	<view class="child">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "child"
			}
		},
		methods: {
			getName() {
				return this.name
			}
		},
		props:{
			age:{
				type:Number,
				default:18
			}
		}
	}
</script>

<style>
</style>