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

柔光的暖阳◎ 2022-03-31 08:07 108阅读 0赞

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"></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"></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 发布订阅][vue _ PubSub]

[vue _ PubSub]: https://blog.csdn.net/zhaohanqq/article/details/84571975