Vue如何规避父子组件单向数据流

Vue组件间传值，默认遵循单向下行绑定原则

360截图20190919081130245.jpg

prop传值的本质，是传递的引用。内外组件同一参数指向同一个内存区域，所以数据可以同步。

如果遇到在子组件内部需要更改prop传值，可以按照如下思路来巧妙处理：子组件sel-user代码如下：

可以看到，接受外部的两个prop参数，title和visible两个参数，title是仅用于显示，visible是需要修改用于切换dialog隐藏/显示。所有，需要给visible参数创建一个内部副本cVisible，实现和visible解绑，支持修改。完美避开单向数据流。父组件中调用代码：

实现效果：

1.gif

点击添加用户按钮，改变 dialog.user=true，传入sel-user组件 :visible="dialog.user"参数， sel-user显示出来。但是发现当弹窗关闭后，再次点击父组件中的添加用户按钮，弹窗丝毫没有反应，控制台也没有报错。原因是在 sel-user中 cVisible副本实现对 visible值的 watch监听，但是外部 dialog.user的值并没有改变，没有触发监听，所以内部 cVisible永远都等于false； 解决思路有2种：
1、添加一个专用于触发监听的prop参数
2、在sel-user中创建一个 show方法，用于直接修改cVisible参数

下面演示方案2实现方式

sel-user组件中methods代码，其他代码都不用动。

...
  methods: {
    show() {
      this.cVisible = true;
    },
    sure: function(flag) {
      this.cVisible = false;
      this.$emit("on-selected", this.cData);
    },
    cancel: function(flag) {
      this.cVisible = false;
    }
  }
...

父组件调用方式：

...
    openSelUser: function() {
      this.$refs.seluser.show();
    },
...

这样，父组件中直接修改子组件中cVisible的值，子组件中可以直接去掉prop -> visible。

---

Vue官网提供的规避单项数据流的解决方案： 规避单向数据流

image.png