【前端5*】表格-表单1（弹窗在父组件）父子组件调用 vue element-ui

在Vue中，如果你想要在父组件中调用子组件的方法，你可以使用ref属性来引用子组件实例，并通过该引用调用子组件的方法。以下是一个简单的例子：

父组件 (ParentComponent.vue):

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <child-component ref="child"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    openDialog() {
      this.$refs.child.openDialogMethod();
    }
  }
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    <el-dialog ref="dialog"></el-dialog>
  </div>
</template>
 
<script>
export default {
  methods: {
    openDialogMethod() {
      this.$refs.dialog.visible = true;
    }
  }
};
</script>

在这个例子中，父组件通过ref="child"引用子组件，并在点击按钮时调用子组件的openDialogMethod方法，该方法会打开el-dialog组件的弹窗。注意，子组件需要暴露一个方法供父组件调用。