uniapp开发：“this.$refs.xxxx“调用子组件无效的可能原因

"this.$refs.xxxx"调用子组件无效的可能原因

1. ref绑定的对象是否正确

<templete>
	<view ref="child"></view>
</templete>
<script>
	export default {
		onLoad(){
			// 会报 "child is undefined" 的问题
			console.log(this.$refs.child)
		}
	}
</script>

问题：
这个是因为uniapp的ref属性不能用在uniapp的内置组件上面，只能用在自定义组件上面

2. 绑定对象的是否存在v-if

<templete>
	<voice-play ref="voicePlay" v-if="show" />
</templete>
<script>
	import voicePlay from "xxxxx/xxx/xxx.vue"
	export default {
		data(){
			return{
				show: false
			}
		},
		components: {
			voicePlay
		},
		onLoad(){
			// 会报 "voicePlay is undefined" 的问题
			console.log(this.$refs.voicePlay)
		}
	}
</script>

问题：

此处的voicePlay无法获取原因是由于v-if的存在导致此处组件并不存在，自然ref属性也不存在。
如果使用v-show就可以解决这个问题，但是这会导致组件的created()提前触发，请斟酌使用

尾记

本博客只是对ref操作问题进行代码的简单演示，可能会存在书写的问题，希望大家谅解。
希望大家可以真正知道这个两种问题的产生原因即可

转发链接https://blog.youkuaiyun.com/qq_43719932/article/details/107477334