Vue中通过v-slot向父组件传值无效，求排查问题

算力阿峰

2026-8-8

问题分析与修正

核心错误点

你试图直接修改插槽作用域中的scope.editMode，但它是父组件（parent-component）的props值，遵循Vue单向数据流原则，无法直接修改来触发响应式更新。
最外层组件中@edit-mode="scope.editMode"的写法只是将事件参数赋值给了作用域属性，并没有更新最外层组件data中的editMode，导致数据链路断裂。

修正方案

1. 最外层组件修改

监听子组件的edit-mode事件，通过方法更新自身data中的editMode，让更新通过props传递到父组件，再同步到插槽：

<parent-component :edit-mode="editMode">
  <template v-slot="scope">
    {{ scope.editMode }}
    <child-component @edit-mode="handleEditModeChange" />
  </template>
</parent-component>

<script>
export default {
  data() {
    return {
      editMode: false,
    };
  },
  methods: {
    handleEditModeChange(newValue) {
      // 更新自身data，触发响应式传递
      this.editMode = newValue;
    }
  }
}
</script>

2. 子组件可选优化（如果需要切换状态而非固定设为true）

如果需求是切换布尔值而非每次都设为true，可以修改子组件的事件触发逻辑：

<button @click="changeEditMode">Change edit mode</button>

<script>
export default {
  data() {
    return {
      editMode: false
    }
  },
  methods: {
    changeEditMode() {
      // 传递切换后的值给父组件
      this.editMode = !this.editMode;
      this.$emit('edit-mode', this.editMode);
    },
  }
}
</script>

3. 父组件（`parent-component`）代码保持不变

它的职责只是将接收的props值传递给插槽，无需修改：

<div>
  <slot :edit-mode="editMode"></slot>
</div>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      required: true,
    },
  },
}
</script>