如何让Vue.js同级组件的监听器响应变量变化以自动刷新列表？

你的代码没生效的核心原因：Post.vue里的api_url是自身组件的私有data变量，和List.vue从父组件接收的api_url prop完全独立，修改Post里的变量根本触发不了List组件的watcher，自然不会重新加载列表。

以下是三种可行的解决方案：

方案一：通过父组件中转事件（推荐，符合Vue组件通信规范） #

这是最常规的组件间通信方式，子组件Post提交成功后通知父组件，由父组件触发List的刷新逻辑。

1. 修改Post.vue的提交方法，提交成功后向父组件触发事件：

export default {
  // ...其他配置
  methods: {
    submitForm() {
      axios.post('api/v1/houses', this.form)
        .then((res) => {
          // 向父组件发送刷新列表的信号
          this.$emit('refresh-list');
          // 重置表单，提升用户体验
          this.form = {};
        })
        .catch(err => {
          // 处理提交失败的情况，比如提示错误
          console.error(err);
        });
    }
  }
}

2. 在父组件Search.vue中，监听Post组件的事件，并更新api_url触发List的watcher：

<template>
  <div class="search-container">
    <!-- 其他筛选组件 -->
    <Post @refresh-list="triggerListRefresh" />
    <List :api_url="api_url" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      api_url: 'api/v1/houses'
      // 其他筛选参数...
    };
  },
  methods: {
    triggerListRefresh() {
      // 由于api_url本身可能没变化，直接赋值不会触发watcher，所以加时间戳参数强制触发
      this.api_url = `api/v1/houses?_=${new Date().getTime()}`;
      // 也可以用临时修改再还原的方式：
      // this.api_url = 'temp-url';
      // this.$nextTick(() => {
      //   this.api_url = 'api/v1/houses';
      // });
    }
  }
};
</script>

方案二：使用Vuex状态管理（适合中大型项目） #

如果项目已经用了Vuex，可以把列表刷新状态或api地址放到全局状态中，Post提交后更新全局状态，List监听状态变化刷新列表。

1. 配置Vuex的store：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    listRefreshFlag: false, // 触发刷新的标志位
    apiUrl: 'api/v1/houses'
  },
  mutations: {
    TOGGLE_REFRESH_FLAG(state) {
      state.listRefreshFlag = !state.listRefreshFlag; // 取反触发变化
    }
  },
  actions: {
    refreshList({ commit }) {
      commit('TOGGLE_REFRESH_FLAG');
    },
    // 封装获取列表的action
    async fetchList({ state }) {
      const res = await axios.get(state.apiUrl);
      return res.data;
    }
  }
});

2. 修改List.vue，监听全局状态变化并刷新列表：

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['listRefreshFlag', 'apiUrl'])
  },
  watch: {
    // 监听刷新标志位变化
    listRefreshFlag() {
      this.fetchListAndUpdate();
    },
    // 保留原来监听apiUrl的逻辑
    apiUrl() {
      this.fetchListAndUpdate();
    }
  },
  methods: {
    ...mapActions(['fetchList']),
    async fetchListAndUpdate() {
      const listData = await this.fetchList();
      this.list = listData; // 把获取到的数据赋值给组件内的列表变量
    }
  },
  mounted() {
    this.fetchListAndUpdate();
  }
};
</script>

3. 修改Post.vue，提交成功后触发Vuex的action：

methods: {
  submitForm() {
    axios.post('api/v1/houses', this.form)
      .then((res) => {
        // 触发全局的列表刷新action
        this.$store.dispatch('refreshList');
        this.form = {};
      });
  }
}

方案三：使用事件总线（适合小型项目快速实现） #

创建一个全局的事件总线，Post提交后触发事件，List监听事件并刷新列表。

1. 在main.js中创建事件总线：

// main.js
import Vue from 'vue';
export const EventBus = new Vue();

new Vue({
  // ...其他配置
}).$mount('#app');

2. 修改Post.vue，提交成功后通过事件总线触发刷新：

import { EventBus } from '@/main.js';

export default {
  methods: {
    submitForm() {
      axios.post('api/v1/houses', this.form)
        .then((res) => {
          // 触发全局刷新事件
          EventBus.$emit('refresh-list');
          this.form = {};
        });
    }
  }
};

3. 修改List.vue，监听事件总线的事件并刷新列表：

import { EventBus } from '@/main.js';

export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    async loadList() {
      const res = await axios.get(this.api_url);
      this.list = res.data;
    }
  },
  watch: {
    api_url() {
      this.loadList();
    }
  },
  mounted() {
    this.loadList();
    // 监听刷新事件
    EventBus.$on('refresh-list', this.loadList);
  },
  beforeDestroy() {
    // 组件销毁前移除监听，防止内存泄漏
    EventBus.$off('refresh-list', this.loadList);
  }
};

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