vue3父组件使用ref调用子组件方法

在vue2中,父组件通过ref调用子组件的方法只需要给子组件添加ref属性,然后使用this.$refs.XXX.method即可

export default {
  mounted() {
    this.$refs.myInput.focus();
  }
}

但是在vue3中,子组件需先使用defineExpose将方法暴露给父组件

//子组件
const myMethod = () => {
  console.log('Hello from myMethod!');
};
// 将 myMethod 暴露给父组件
defineExpose({ myMethod });

调用方法如下:

1、使用getCurrentInstance


2、使用ref函数创建一个响应式的引用,并将其绑定到子组件上


你可能感兴趣的:(javascript,前端,vue.js)