vue父页面如何调用子组件方法?在使用组件开发项目的时候,父子传参和互相调用方法是常见的操作,那么下面总结一下我目前用的vue父页面调用子组件的方法。

vue父页面调用子组件的方法-Qui-Note

实现步骤

1.引入组件,声明组件

import {uiPage} from '../components'
....
components: {
    uiPage
}

2.页面使用组件

<uiPage></uiPage>

3.用ref给组件起个“名字”,方便接下来操作

<uiPage ref="childs"></uiPage>

4.在父页面需要的地方通过 this.$refs.'名字'.'子组件方法'

setTimeout(() => {
        this.$refs.childs.resets() // 调用子组件的方法,重置分页
}, 10)

5.子组件中写好对应的方法

resets () {
      this.currentPage = 1
}

注意:一定要加计时器!!!不然会报错:Error in mounted hook: “TypeError: Cannot read property ‘***’ of undefined”

按照上面的方法,就可以实现vue父页面调用子组件的方法了。打工人,加油2021,继续前进!