uniapp 自定义组件获取焦点
时间: 2023-12-05 12:41:31 浏览: 163
在uniapp中,可以通过`$refs`来获取自定义组件的实例,然后调用组件实例的`focus()`方法来使组件获取焦点。具体步骤如下:
1. 在自定义组件的`<template>`标签中,给需要获取焦点的元素添加`ref`属性,例如:
```html
<template>
<div>
<input ref="input" type="text">
</div>
</template>
```
2. 在自定义组件的`<script>`标签中,定义`focus()`方法,使其调用`$refs`获取元素实例并调用`focus()`方法,例如:
```javascript
<script>
export default {
methods: {
focus() {
this.$refs.input.focus();
}
}
}
</script>
```
3. 在父组件中,使用`$refs`获取自定义组件实例,并调用`focus()`方法,例如:
```html
<template>
<div>
<custom-component ref="custom"></custom-component>
<button @click="$refs.custom.focus()">获取焦点</button>
</div>
</template>
```
当点击按钮时,自定义组件中的输入框将会获取焦点。
阅读全文