vue父组件怎么调用子组件的事件-父组件用ref同步给子组件传递参数

父组件调用子组件的获取详情方法

父组件需要调用子组件是时候，我们可以给子组件加一个ref，这样在父组件中拿到子组件的实例，来调用那个函数，以及给函数传递父组件的参数。

本来是可以直接用props把参数（id）传递给子组件使用的，但是props传参是异步的，在这里就会导致以及进去编辑页了，但是props的值还没传过去，所以直接用ref拿到子组件的实例，来给子组件传参。

编辑时，我们需要获取点击部门的信息。

封装获取部门信息的模块 src/api/departments.js

/** *
 * 获取部门详情
 * ***/
export function getDepartDetail(id) {
  return request({
    url: `/company/department/${id}`
  })
}

在什么时候获取部门详情?

我们可以在调用编辑方法 editDepts中通过ref调用add-dept.vue的实例方法

 // 获取部门详情
    async  getDepartDetail(id) {
      this.formData = await getDepartDetail(id)
  }

在父组件中调用子组件的实例，来给这个获取部门的事件传递参数

<AddDept ref="raddDept"/>

   // 点击编辑触发的父组件的方法
    editDepts(node) {
      this.showDialog = true // 显示新增组件弹层
      this.node = node // 存储传递过来的node数据
      // 我们需要在这个位置 调用子组件的方法
      // 父组件 调用子组件的方法
      this.$refs.raddDept.getDepartDetail(node.id) // 直接调用子组件中的方法 传入一个id
    }

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！