vue elementUI 在两个不同的页面实现组件弹框及父子组件的传值

假设有两个文件
其中一个为父组件
一个为Dialog的弹框子组件
通过父组件传值控制弹框的打开
然后子组件传值告诉父组件弹框是否关闭

父组件
按钮点击触发方法 通过 isShowData 给子组件传值

<el-button @click="clickDialog">点击显示弹框</el-button>
<Dialog :isShowData="isShowData" @cancel="closeDialog" />
export default {
    components:{Dialog},
    data(){
      return{
        isShowData:false
      }
    },
    methods:{
      clickDialog(){
        this.isShowData = true
      },
      closeDialog(){
        this.isShowData = false;
      }
    }
  }

子组件
子组件通过props接收父组件传递过来的isShowData
当点击了取消按钮的时候传递父组件一个标示 告诉此父组件可以关闭对话框
父组件通过@cancel 再将对话框的true改为false

<el-dialog title="子组件" :visible.sync="isShowData">
  <div slot="footer">
    <el-button type="primary">确 定</el-button>
    <el-button @click="cancleDialog">取 消</el-button>
  </div>
</el-dialog>
export default {
    props:['isShowData'],
    data() {
      return {
      };
    },
    methods:{
      cancleDialog(){
        this.$emit("cancel")
      }
    }
  }