uni-app开发中 this.$refs 用不了

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

问题：

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

3.执行中报错undefined

需要添加 this.$nextTick(()=>{})

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

内置组件指的是view这些，这个“坑坑”是由于这些组件不是vue组件，且和用户的代码不在同一个环境中（不在逻辑层而在视图层），获取不到。

支付宝小程序中有点问题，但是可以改变方法获取，具体请看：解决 uni-app 自定义组件在支付宝小程序中无法使用 ref 的问题