VUE优化使用属性进行父子传参【进行自我刷新】

记录一个今天的需求：

点击子组件中修改按钮之后，父组件中的数据更新

描述思路：

1、在子组件中设置方法，操作自身刷新；

2、子组件在调用父组件方法时，会调用父组件中的显示隐藏属性，隐藏自己

3、该属性在父组件中的设置应该和隐藏子组件的方法联系在一起

一、最基本写法

（1）、设置控制属性 setTimestamp

在控制页面转换的文件目录下mutation-type.js中设置

export const SET_ADJUST_TIMESTAMP = 'SET_ADJUST_TIMESTAMP';

在mutation.js中设置

  // 设置数据修改时间
  [SET_ADJUST_TIMESTAMP](state, timestamp = 0) {
    state.adjust.timestamp = timestamp;
  },

（2）、父组件中写刷新方法

 timeStemp(){
          this.setTimestamp(Date.now());
      },

（3）、父组件将这个方法传给子组件

  如果想看更详细的解说，可以看这个 （自我推荐）

https://blog.youkuaiyun.com/weixin_42636552/article/details/89177975

（4）、子组件进行调用

     // 确定操作
      handleCommit() {
        this.$emit('timeStemp');
        this.closeDialog();
      },

      // 关闭弹窗
      closeDialog() {
        this.$emit('hideDialog');
      },

（5）看看效果

在子组件显示的时候，后面的数据是这样子的。

点击应用修改之后：

数据已经变化，说明页面刷新  【我这里使用的数据是mock模拟生成的，所以有点杂乱】

二、优化设置

由于已经存在控制组件隐藏和显示的属性和方法，所以没有必要相同的东西写两遍，

降低代码冗余度是我毕生的追求，啊哈哈哈哈哈。。。

一种设置控制属性 setTimestamp不变，看后面的设置

优化思路：

将刷新方法变成一个属性，作为隐藏的参数                                 【超级喜欢这个思路】

父组件中：

 // 关闭弹窗
      hideDialog(refresh = false) {
        this.dialogVisible = false;
        if (refresh) {
          this.setTimestamp(Date.now());
        }
      },

子组件中：

 // 确定操作
      handleCommit() {
        this.closeDialog(true);
      },
      // 关闭弹窗
      closeDialog(refresh = false) {
        this.$emit('hideDialog', refresh);
      },

减少父组件向子组件传递方法的一个阶段，代码看起来也比较简洁。

 

结果一致，此处不贴，任性。

---

  THE     END

 

good  lunck   to  you