.sync原理（Vue组件父子传值）

Posted 2023-03-22

参考技术A 首先，我们需要明确的是，子父组件之间通讯，子组件是不能直接改变父组件的值的。（父组件是大佬，小弟不能改变大佬的值，但是父组件可以改变子组件的值）

通过某种方式，子组件可以”直接“改变父组件的值。

控制弹框的显示与关闭。在父组件中打开子组件弹框，然后在点击子组件中的按钮关闭弹框。

这样的写法没错，但是显的比较臃肿，明明我只是要改一个值，就不能简单点？
答案是，当然是可以的。
大家肯定会想，那我不能直接改变父组件的值？想v-model那样，多爽。
vue也是考虑到了这点，所以提供了一个更好的解决方案

对于 @update:visible="（val）=>childShow = val" :visible="childShow"，vue提供了一个语法糖，将其替换成 :visible.sync = "childShow" ，这样是不是看起来简洁多了。

那么就变成了：

在vue中使用setter改写父子组件传的值

概述

最近在用muse ui的时候碰到一个问题，简单来说是这样的，父子之间传值，父组件和子组件使用相同的props命名，并且子组件不用emit，而用等号赋值。

最后使用计算属性的setter函数解决了，记录下来，供以后开发时参考，相信对其他人也有用。

父子组件传值

根据官方文档里面对于sync的描述，可以使用如下方法进行父子组件的传值。

1.父组件在调用子组件的时候使用sync。

<text-document :childTitle.sync="title"></text-document>

上面的代码会被vue处理成下面的形式：

<text-document
  :childTitle="title"
  @update:childTitle="this.title=$event">
</text-document>

2.子组件在定义的时候使用childTitle和emit。在子组件定义的时候，通过props把childTitle传进去就可以使用了，然后通过emit来更新childTitle的值。使用emit的语法如下：

this.$emit('update:childTitle', val);

遇到的问题

一般情况下，使用上面的方法来进行父子组件互相传值已经足够了，但是如果需要加上下面2个条件呢：

1. 父子组件的变量使用相同的命名。
2. 子组件不使用emit，而是使用等号进行更新。

对于问题1，直接用相同的命名即可，没有任何问题；但是对于问题2，如果用等号更新的话，开发者工具里面就会报错：不能改变props里面的值。

解决方法

于是我们考虑使用setter来设置一个中间变量，在修改这个变量的时候顺带使用emit修改父组件传进来的值。代码如下：

  // 省略了其他内容
  props: ['childTitle'],
  computed: {
    title: {
      get: function() {
        return this.childTitle;
      },
      set: function(val) {
        this.$emit('update:childTitle', val);
      }
    }
  }

问题思考

1.vue就是通过这个原理来更新的。
2.可以考虑写一个vue库或者npm库，把emit响应转化为等号赋值。