Vue3父组件怎么使用子组件的方法
时间: 2023-11-19 19:54:11 浏览: 106
Vue3父组件可以通过使用ref来获取子组件实例,然后调用子组件的方法。具体步骤如下:
1. 在父组件中使用ref指令关联子组件,例如:`<child ref="childComp"/>`。
2. 在父组件的setup函数中使用`ref`函数定义子组件实例,例如:`const childComp = ref(null);`。
3. 在父组件中定义一个方法,例如:`const onTry = () => { let msg = childComp.value.state.title; childComp.value.play(); };`。
4. 在子组件中使用`expose`选项暴露需要给父组件调用的方法或对象,例如:`expose: ['play']`。
5. 在父组件中调用子组件的方法,例如:`childComp.value.play()`。
另外,Vue3还提供了选项式API来实现父组件调用子组件的方法,具体步骤如下:
1. 在父组件中使用ref指令关联子组件,例如:`<child ref="childComp"/>`。
2. 在父组件中定义一个方法,例如:`onClick: function () { let msg = this.$refs.childComp.message; this.$refs.childComp.play(); }`。
3. 在子组件中使用`expose`选项暴露需要给父组件调用的方法或对象,例如:`expose: ['play']`。
4. 在父组件中调用子组件的方法,例如:`this.$refs.childComp.play()`。
阅读全文