当前位置: 首页 > 工具软件 > wechat.el > 使用案例 >

uniapp 微信小程序this.$refs返回空对象,这个是因为uniapp的ref属性不能用在uniapp的内置组件上面,只能用在自定义组件上面

杜联
2023-12-01
<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)

 类似资料: