Vue.js 3：如何从兄弟组件B修改组件A的布尔值

方法1：父组件中转（最基础常用） #

兄弟组件无法直接通信，通过父组件做中间层是最稳妥的方案：

父组件代码 #

<template>
  <div>
    <!-- 将状态传递给组件A -->
    <ComponentA :editIsClicked="editIsClicked" />
    <!-- 监听组件B的分页切换事件 -->
    <ComponentB @page-change="toggleEditState" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      editIsClicked: false
    }
  },
  methods: {
    toggleEditState() {
      // 切换布尔值状态
      this.editIsClicked = !this.editIsClicked
    }
  }
}
</script>

组件B修改（触发事件通知父组件） #

<template>
  <v-pagination
    v-model="currentPage"
    :length="lastPage"
    :total-visible="8"
  ></v-pagination>
</template>

<script>
export default {
  props: ["store", "collection"],
  data() {
    return {
      currentPage: 1, // 补充初始化避免报错
      lastPage: 10 // 替换为你的实际分页总数
    }
  },
  watch: {
    currentPage(newVal) {
      this.paginatePage(newVal);
      // 分页切换时向父组件发送事件
      this.$emit('page-change')
    },
  },
  methods: {
    paginatePage(val) {
      // 你的分页逻辑代码
    }
  }
};
</script>

组件A修改（接收父组件传值） #

<template>
  <div></div>
</template>

<script>
export default {
  // 接收父组件传递的状态
  props: ['editIsClicked'],
  // 如果需要在组件A内部修改该值，可通过带set的computed实现双向绑定
  /*
  computed: {
    localEditState: {
      get() {
        return this.editIsClicked
      },
      set(val) {
        this.$emit('update:editIsClicked', val)
      }
    }
  }
  */
}
</script>

方法2：Vuex全局状态管理（适合中大型项目） #

如果项目已使用Vuex，直接将状态托管到全局，无需依赖父组件中转：

Vuex Store示例 #

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    editIsClicked: false
  },
  mutations: {
    TOGGLE_EDIT(state) {
      state.editIsClicked = !state.editIsClicked
    }
  },
  actions: {
    toggleEdit({ commit }) {
      commit('TOGGLE_EDIT')
    }
  }
})

组件B修改（调用Vuex Action） #

<script>
export default {
  // ...其他代码
  watch: {
    currentPage(newVal) {
      this.paginatePage(newVal);
      // 触发全局状态修改
      this.$store.dispatch('toggleEdit')
    },
  }
};
</script>

组件A获取全局状态 #

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    // 将全局状态映射到组件内部
    ...mapState(['editIsClicked'])
  }
}
</script>

方法3：事件总线（小型项目快速实现） #

创建全局事件总线，组件B发送事件，组件A监听并处理：

第一步：全局注册事件总线（main.js） #

import Vue from 'vue'
// 挂载全局事件总线
Vue.prototype.$bus = new Vue()

组件A监听事件 #

<script>
export default {
  data() {
    return {
      editIsClicked: false,
    }
  },
  mounted() {
    // 监听分页切换事件
    this.$bus.$on('page-changed', () => {
      this.editIsClicked = !this.editIsClicked
    })
  },
  beforeDestroy() {
    // 页面销毁前移除监听，避免内存泄漏
    this.$bus.$off('page-changed')
  }
}
</script>

组件B触发事件 #

<script>
export default {
  // ...其他代码
  watch: {
    currentPage(newVal) {
      this.paginatePage(newVal);
      // 触发事件总线通知组件A
      this.$bus.$emit('page-changed')
    },
  }
};
</script>

内容的提问来源于stack exchange，提问作者martin-den