巧用 Vue2.x 中父子组件双向绑定的替代方案

2024-01-15 17:18:55

在 Vue2.x 中，父子组件之间的通信是通过 props 和 emit 实现的。props 用于将父组件的数据传递给子组件，而 emit 用于子组件向父组件发送事件。然而，props 存在一个限制：子组件不能修改 props 的值，这意味着您无法在子组件中改变父组件的数据。

这个限制在某些情况下会带来麻烦。例如，如果您想要实现一个 popup 组件，那么您需要根据父组件的状态来确定子组件的显示隐藏。为了解决这个问题，您可以使用以下替代方案：

1. 使用 emit() 和 on() 进行通信

// 父组件
export default {
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    togglePopup() {
      this.showPopup = !this.showPopup;
    },
  },
};

// 子组件
export default {
  props: ['showPopup'],
  methods: {
    closePopup() {
      this.$emit('closePopup');
    },
  },
};

在父组件中，您使用 emit() 方法发送一个 `closePopup` 事件，在子组件中，您使用 on() 方法监听这个事件，并执行 closePopup() 方法来关闭 popup。

2. 使用 Vuex 进行状态管理

如果您使用 Vuex 进行状态管理，那么您可以将 popup 的状态存储在 Vuex 的 store 中。这样，父组件和子组件都可以访问这个状态，并根据需要进行更新。

// store/popup.js
export default {
  state: {
    showPopup: false,
  },
  mutations: {
    togglePopup(state) {
      state.showPopup = !state.showPopup;
    },
  },
};

// 父组件
export default {
  computed: {
    showPopup() {
      return this.$store.state.popup.showPopup;
    },
  },
  methods: {
    togglePopup() {
      this.$store.commit('popup/togglePopup');
    },
  },
};

// 子组件
export default {
  computed: {
    showPopup() {
      return this.$store.state.popup.showPopup;
    },
  },
  methods: {
    closePopup() {
      this.$store.commit('popup/togglePopup');
    },
  },
};