ElementUI_Plus+Vue3:将element Dialog作为组件，实现点击登陆按钮弹出登录界面思路记录

需求是点击登陆按钮实现弹出登陆界面，但是我想把登录Dialog作为一个组件在主界面调用。子组件与父组件之间的通信就出现了困难。
总结经验：
1.使用props从父组件向子组件传值。但是props是单向绑定，子组件中无法使用它改变父组件中的值。详见官方文档props单向数据流
2.使用this.$emit()在子组件中改变父组件中logvisible的值。
精简版代码：

父组件代码:
<template>
     <el-button type="text" @click="showLogdialog()" >登录</el-button>
     <Logdialog :dialogflag.="logvisible" @closedia = "closedia"></Logdialog>
</template>
<script>
 import Logdialog from "../components/Logdialog"; //导入组件
 export default {
        name: 'Home',
        components: { Logdialog},
        data() {
          return 
           {
             logvisible: false,  //Boolean 用于dialog隐藏/显示
           }},
        methods: {
           showLogdialog(value)  //点击按钮，显示dialog
           {
             this.logvisible = true;
           },
          closedia(){
              this.logvisible = false;
          }
        }
    }
</script>

1. 第二行中 :dialogflag.="logvisible"，将父组件中的数据Boolean：logvisible绑定到子组件中的数据dialogflag，在子组件中，根据dialogflag:true/false 判断显示/隐藏。
2. 第二行中 @closedia = "closedia"添加自定义事件，供子组件中this.$emit()调用，以在子组件中改变父组件中logvisible 的值。

子组件代码:
<template>
  <el-dialog
      title="用户登录与注册"
      v-model="dialogflag"   
      :close-on-click-modal="false"
      :before-close="logdialogclose"  关闭前的回调
      :destroy-on-close="true"
  >
  登陆界面表单内容
  </el-dialog>
</template>
<script>
export default {
  name: "Logdialog",
  props: {
    dialogflag: Boolean,
  },
  emits: ['closedia'],
  methods: {
    logdialogclose() {
      this.$emit('closedia')
    }
  }
}
</script>

3. 通过 props{ }声明dialogflag是父组件中传过来的值，通过this.$emit('closedia')调用父组件中的方法，改变父组件中的logvisible的值。

参考文章：emit的使用