通过Vue提供的ref属性去访问子组件实例,并调用子组件中的方法
调用子组件中的方法
通过ref属性来访问子组件实例,并调用子组件中的方法:
- 给要访问的子组件添加ref属性
<template>
<Modal ref="modal"></Modal>
</template>
- 调用子组件中的方法
通过this,$refs.modal来访问自定义组件Modal.vue:
<script>
export default {
methods: {
showModal() {
// 调用子组件中的 show 方法
this.$refs.modal.show();
}
}
};
</script>
ref访问子元素
<template>
<div id="app">
<input ref="input" type="text" />
<button @click="focusInput">点击使输入框获取焦点</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
focusInput() {
// this.$refs.input 访问输入框元素,并调用 focus() 方法使其获取焦点
this.$refs.input.focus();
}
}
}
</script>
案例来自优课达