在前端开发中，使用 ElementUI 框架进行项目构建时，父组件调用子组件的 ref 方法是一个常见的需求。这种方式能够让父组件灵活地控制子组件的行为，实现更为复杂的交互逻辑。

要在子组件中定义需要被调用的方法。例如，在一个自定义的子组件中，我们可能有一个用于数据更新或者界面刷新的方法。以一个简单的列表展示子组件为例，子组件内部可能有一个 refreshList 方法，这个方法用于重新获取数据并更新列表显示。

<template>
  <div>
    <el-table :data="listData">
      <!-- 表格列定义等 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: []
    };
  },
  methods: {
    refreshList() {
      // 这里可以写获取数据的逻辑，比如调用接口
      this.listData = [/* 新的数据 */];
    }
  }
};
</script>

接下来，在父组件中使用该子组件，并通过 ref 来调用其方法。在父组件的模板中，引入子组件并为其设置一个唯一的 ref 标识。

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <el-button @click="callChildMethod">调用子组件方法</el-button>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';

export default {
  components: {
    childComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.refreshList();
    }
  }
};
</script>

在上述代码中，当父组件中的按钮被点击时，callChildMethod 方法会被触发。通过 this.$refs.childRef，父组件可以获取到子组件的实例，进而调用子组件中的 refreshList 方法。

需要注意的是，在使用 ref 调用子组件方法时，要确保子组件已经完成挂载。否则可能会出现找不到子组件实例的情况。通常可以在父组件的 mounted 钩子函数中进行相关操作，以保证子组件已经渲染完成。

通过这种方式，我们能够方便地实现 ElementUI 父组件调用子组件 ref 方法，有效地提升开发效率，构建出更具交互性的前端应用。