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)、父组件将这个方法传给子组件

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

  如果想看更详细的解说,可以看这个 (自我推荐)

https://blog.csdn.net/weixin_42636552/article/details/89177975

(4)、子组件进行调用

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

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

(5)看看效果

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

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

点击应用修改之后:

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

数据已经变化,说明页面刷新  【我这里使用的数据是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 

 

 

 

 

 

 

 

 

 

 

 

上一篇:实现SpringCloud Config 客户端自动刷新


下一篇:adoquery.refresh和adoquery.query的区别