VUE学习宝典之el-dialog使用示例

<template>  
  <div>  
    <el-button @click="dialogVisible = true">打开弹出框</el-button>  
    <el-dialog :visible.sync="dialogVisible" title="提示" width="30%" @close="dialogVisible = false">  
      <p>这是一段信息</p>  
      <div slot="footer" class="dialog-footer">  
        <el-button @click="dialogVisible = false">取 消</el-button>  
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>  
      </div>  
    </el-dialog>  
  </div>  
</template>

export default {  
  data() {  
    return {  
      dialogVisible: false,  
    };  
  },  
};

<template>  
  <div>  
    <child-component ref="childDialog" :initial-message="parentMessage" @child-event="handleChildEvent"></child-component>  
    <el-button @click="openChildDialog">打开子组件的弹出框</el-button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent'  
    };  
  },  
  methods: {  
    openChildDialog() {  
      // 通过 $refs 访问子组件实例，并调用 openDialog 方法打开弹出框  
      this.$refs.childDialog.openDialog();  
    },  
    handleChildEvent(childMessage) {  
      // 处理子组件传递的事件和参数  
      console.log('Received message from child:', childMessage);  
      // 可以在这里执行其他逻辑或更新父组件的数据  
    }  
  }  
};  
</script>

<template>  
  <div>  
    <el-dialog :visible.sync="dialogVisible" title="子组件的弹出框">  
      <p>{{ message }}</p>  
    </el-dialog>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    initialMessage: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      dialogVisible: false, // 控制弹出框的显示与隐藏  
      message: this.initialMessage // 初始化时接收父组件传递的参数  
    };  
  },  
  methods: {  
    openDialog() {  
      // 打开弹出框，并触发父组件的事件传递参数  
      this.dialogVisible = true;  
      this.$emit('child-event', 'Hello from child');  
    },  
    closeDialog() {  
      // 关闭弹出框  
      this.dialogVisible = false;  
    }  
  },  
  watch: {  
    initialMessage(newValue) {  
      // 监听父组件传递的参数变化，并更新子组件的数据  
      this.message = newValue;  
    }  
  }  
};  
</script>