关于对vue props值修改的问题，用$emit或pubsub-js代替

vue项目中要使用Element UI组件的对话框Dialog，因为该组件相比其他组件稍微复杂一点，并且有事件需要处理，所以单独写在了一个模板里，需要一个props，从父组件向子组件传递布尔值，是否显示该对话框，并且打算在该子组件里处理取消和确定事件。

鉴于vue官方文档说

不应该在一个子组件内部改变 prop
如果这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
props: [‘initialCounter’],
data: function () {
return {
counter: this.initialCounter
}
}

我的代码如下：

<template>
  <div class="wrapper">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定要退出吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelExit">取 消</el-button>
        <el-button type="primary" @click="exitConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: this.dialog
    };
  },
  mounted() {
    console.log(this.visible)
 },
  computed: {
    dialogVisible() {
      console.log(this.visible);
      return this.dialog;
    }
  },

在mounted方法中打印this.visible 为false，在触发事件显示该对话框时会执行dialogVisible计算属性，此时this.dialog为true，但是此时打印的this.visible也是false，为什么没有像官网说的那样接收到props的值？？是不是我哪里写错了或者理解错了，路过的高人能否告知一下，谢谢！

然后尝试别的方法：
vm.$emit()方法，让子组件的事件在父组件中执行，代码如下：

//父组件
<template>
  <span v-else @click="exitClick">
    <i class="iconfont exit">&#xe669;</i>退出
  </span>
  <DialogExit :dialog-visible="dialogVisible" @dialog="operateDialog"></DialogExit>
</template>
<script>
import DialogExit from "./components/DialogExit/DialogExit";
export default {
  methods: {
    //退出登录
    exitClick() {
      this.dialogVisible = true;
    },
    //执行退出自定义事件
    operateDialog(e) {
      if (e) {
        localStorage.clear();
        this.$store.dispatch("exit");
        this.dialogVisible = !e;
      } else {
        this.dialogVisible = e;
      }
    }
  }
};
<script>

//子组件
<template>
  <div class="wrapper">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定要退出吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelExit">取 消</el-button>
        <el-button type="primary" @click="exitConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    //确定退出登录
    exitConfirm() {
      this.$emit('dialog', true)   //自定义事件
    },
    //取消退出
    cancelExit() {
      this.$emit('dialog', false)  //自定义事件
    }
  }
};
</script>

pubsub-js发布-订阅
先安装“npm install --save pubsub-js”
在需要的组件里引入“import PubSub from ‘pubsub-js’”
代码如下：

//父组件
<template>
  <span v-else @click="exitClick">
    <i class="iconfont exit">&#xe669;</i>退出
  </span>
  <DialogExit :dialog-visible="dialogVisible"></DialogExit>
</template>
<script>
import DialogExit from "./components/DialogExit/DialogExit"
import PubSub from 'pubsub-js'
export default {
  created() {
    //订阅关闭弹窗事件
    PubSub.subscribe("dialog", (event, e) => {
      if (e) {
        localStorage.clear();
        this.$store.dispatch("exit");
        this.dialogVisible = !e;
      } else {
        this.dialogVisible = e;
      }
    }); 
  },
  methods: {
    //退出登录
    exitClick() {
      this.dialogVisible = true;
    }
  }
};
<script>

//子组件
<template>
  <div class="wrapper">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定要退出吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelExit">取 消</el-button>
        <el-button type="primary" @click="exitConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    //确定退出登录
    exitConfirm() {
      PubSub.publish('dialog', true);  //发布
    },
    //取消退出
    cancelExit() {
      PubSub.publish('dialog', false);  //发布
    }
  }
};
</script>

可以参考一下这篇文章vue 组件间通信 PubSub 发布订阅