<template>
<view class="pl24 pr24 fz30" @click="click" ref="test">
<evaluate/>
</view>
</template>
<script>
import evaluate from "./cancelOrder.vue"
export default{
components:{evaluate},
methods: {
click(){
console.log(2222)
this.$nextTick(()=>{
console.log(this.$refs,"+this")
console.log(this.$refs.test,"333333333")
})
}
}
}
</script>
打印结果:打印的this.$refs为空对象
![在这里插入图片描述](https://img-blog.csdnimg.cn/a5eb20915cef40218d1dfcb8e364a1d3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXhsV2hi,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
修改后的代码
<template>
<view class="pl24 pr24 fz30" @click="click">
<evaluate ref="test"/>//此处为重点 这个是因为uniapp的ref属性不能用在uniapp的内置组件上面,只能用在自定义组件上面
</view>
</template>
<script>
import evaluate from "./cancelOrder.vue"
export default{
components:{evaluate},
methods: {
click(){
console.log(2222)
this.$nextTick(()=>{
console.log(this.$refs,"+this")
console.log(this.$refs.test,"333333333")
})
}
}
}
</script>
打印结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/eedcb06a776a4b95b4981a55fc094cd5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXhsV2hi,size_20,color_FFFFFF,t_70,g_se,x_16)