1. 语法

this.$refs[“组件上绑定的ref名字”].组件中定义的方法名()

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
<script>
import Child from './Child';
export default {
    name: "parent",
    components: { 
   		Child 
    },
    methods: {
        handleClick() {
              this.$refs.child.focus(); //focus为child子组件中定义的方法
        },
    },
}
</script>

2.多个组件绑定同一个ref名,this.$refs[refName]拿到的值为数组,需循环调用子组件中的方法

在这里插入图片描述

a. 如图,多个组件绑定同一个ref名:form
b. 通过this.$refs拿到的dom对象为数组,需循环调用子组件中的方法

  • this.$refs拿到的dom对象为数组
  • 循环调用子组件中的方法
this.$nextTick(() => {
 this.$refs.form.forEach(el => el.clearValidate());
});
Logo

前往低代码交流专区

更多推荐