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

在Vue中，你可以使用$refs来调用子组件中的方法，以便在父组件中打开一个弹窗。以下是一个简单的例子：

父组件 (Parent.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.openDialogFunc();
    }
  }
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    <el-dialog ref="dialog" title="弹窗标题">
      弹窗内容
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  methods: {
    openDialogFunc() {
      this.$refs.dialog.visible = true;
    }
  }
};
</script>

在这个例子中，父组件中的<el-button>元素绑定了一个点击事件@click，当按钮被点击时，会调用父组件的openDialog方法。该方法通过$refs调用子组件的openDialogFunc方法，该方法会将子组件中的el-dialog的visible属性设置为true，从而打开弹窗。