Vue2中如何实现父子组件间布尔值双向同步？

先纠正你之前的错误点 #

1. 计算属性中使用$emit无效：计算属性是用来返回依赖计算后的值，不会主动触发事件，而且$emit本身没有返回值，所以你的uploadBtn计算属性既不会在isUploading变化时执行，也起不到同步状态的作用。
2. 父组件方法获取值错误：父组件的syncData里用this.isUploading是错的——父组件的data里根本没有这个属性，你需要接收子组件通过$emit传递过来的参数。
3. 模板事件绑定写法错误：模板里写@child-upload-status="syncData()"会导致事件触发时不传递参数，正确写法是直接写方法名syncData，Vue会自动把$emit的参数传给它。

正确实现方式（基础版） #

子组件：监听状态变化并传递给父组件

当子组件的isUploading发生变化时，通过$emit把最新值传递给父组件，这里用watch监听状态变化最稳妥：

<template>
  <!-- 示例：点击按钮触发上传状态变化 -->
  <button @click="toggleUpload">切换上传状态</button>
</template>

<script>
export default {
  data() {
    return {
      isUploading: false
    };
  },
  methods: {
    toggleUpload() {
      this.isUploading = !this.isUploading;
      // 也可以在这里直接emit，不用watch，看你状态变化的触发场景
      // this.$emit('child-upload-status', this.isUploading);
    }
  },
  watch: {
    // 监听isUploading的变化，一旦改变就通知父组件
    isUploading(newStatus) {
      this.$emit('child-upload-status', newStatus);
    }
  }
};
</script>

父组件：接收子组件状态并同步

父组件监听子组件的事件，接收传递过来的状态值，赋值给自己的uploadStatus，之后就可以把这个值传给其他子组件：

<template>
  <div>
    <!-- 绑定子组件的自定义事件 -->
    <ChildComponent @child-upload-status="syncUploadStatus" />
    <!-- 将同步后的状态传给另一个子组件 -->
    <AnotherChild :upload-status="uploadStatus" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import AnotherChild from './AnotherChild.vue';

export default {
  components: {
    ChildComponent,
    AnotherChild
  },
  data() {
    return {
      uploadStatus: false
    };
  },
  methods: {
    // 接收子组件传递的最新状态
    syncUploadStatus(newStatus) {
      this.uploadStatus = newStatus;
    }
  }
};
</script>

简化写法：使用.sync修饰符 #

如果想更简洁，可以用Vue2的.sync语法糖，省去手动写事件监听和同步方法的步骤：

子组件：触发update事件

// 当isUploading变化时，触发update:uploadStatus事件
this.$emit('update:uploadStatus', this.isUploading);

父组件：使用.sync绑定

<ChildComponent :upload-status.sync="uploadStatus" />

这样父组件的uploadStatus会自动和子组件的isUploading保持同步，无需额外写方法。

内容的提问来源于stack exchange，提问作者Maflec