一、什么是$refs
在Uniapp开发中，`$refs`是一个非常有用的特性，它允许开发者直接访问子组件的实例或DOM元素。通过给组件或元素添加`ref`属性，我们可以在父组件中方便地调用子组件的方法或访问其属性。
二、基本使用方法
1. 为组件添加ref属性
html
2. 在父组件中访问子组件实例
javascript
export default {
methods: {
callChildMethod() {
// 通过this.$refs访问子组件
this.$refs.myChild.someMethod();
// 也可以访问子组件的data
console.log(this.$refs.myChild.someData);
}
}
}
三、常见使用场景
1. DOM元素操作（H5端）
html
<script>
export default {
mounted() {
// H5端可以获取DOM元素进行操作
ifdef H5
this.$nextTick(() => {
const el = this.$refs.myView;
el.style.color = 'red';
});
endif
}
}
</script>
2. 表单验证场景
html
<script>
export default {
methods: {
submit() {
this.$refs.myForm.validate(valid => {
if(valid) {
console.log('验证通过');
} else {
console.log('验证失败');
}
});
}
}
}
</script>
四、注意事项
1. 时机问题：必须在mounted生命周期后才能访问到$refs
2. 跨平台差异：
- H5端可以获取真实DOM节点
- App和小程序端只能获取到组件的实例
3. 动态渲染问题：v-for循环中的$需要等到v-for完成渲染后才能正确引用
4. 命名冲突：避免重复的引用名
5.性能考虑：过度使用可能会影响应用性能
五、高级用法示例
1.v-for中的使用
html
< template >
< child - component
v - for = "item in list"
: key = "item.id"
: ref = "'child' + item.id " >
export default {
data (){ return { list : [{ id :1 },{ id :2 }] }},
mounted (){
console . log ( this . $ ref.child1 );//第一个子组件的实例
console . log ( this . $ ref.child2 );//第二个子组件的实例
}};
2.ref与函数式组件的配合
javascript
methods:{
setRef(el){
if(el){
//这里会接收到对应的DOM或组件实例
}
}}
六、总结
` $ ref `是UniApp开发中的一个重要特性,合理使用可以让我们的代码更加简洁高效。但也要注意它的局限性,特别是在多平台兼容性方面。建议在简单交互场景下优先考虑props和events,只有在确实需要直接操作时才使用 ` $ ref ` 。
文章点评