"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 的问题