Vue.js子组件接收父组件prop报错：sortType被直接修改

首先，控制台报错的核心原因是你在代码中存在可能间接修改sortType prop的风险，同时还有命名冲突、数据不同步的问题，我来逐一拆解并给出修复方案：

1. 子组件存在props与methods命名冲突 #

你在子组件的props中声明了filterList，同时又在methods里定义了同名的filterList方法——这会导致Vue优先使用props的值覆盖methods，不仅会让你的排序事件逻辑失效，还可能引发意外的prop修改行为，这很可能是报错的导火索。

修复方法：
把子组件的排序事件处理方法重命名，比如改成handleSortChange：

<select id="sortBox" v-model="sortData" v-on:change="handleSortChange">
  <option value="">sorting</option>
  <option value="price">cheapest</option>
  <option value="created_at">newest</option>
</select>

<script>
export default {
  props:["filterList", "slider", "sliderX", "sortType"],
  components: { vueSlider },
  data() {
    return { sortData: this.sortType }
  },
  methods: {
    handleSortChange(newType){
      this.$emit('update:type', newType)
    }
  }
}
</script>

2. 子组件sortData未与父组件sortType实时同步 #

你在子组件data中初始化sortData: this.sortType，但data只会在组件首次渲染时赋值一次，当父组件的sortType变化时，子组件的sortData不会自动更新。如果后续不小心写出this.sortType = ...这类直接修改prop的代码，就会触发控制台的报错。

更规范的双向绑定实现：
推荐用Vue的.sync修饰符+计算属性来处理，既避免直接修改prop，又能保证父子组件数据实时同步：

子组件调整： #

<select id="sortBox" v-model="localSortType">
  <option value="">sorting</option>
  <option value="price">cheapest</option>
  <option value="created_at">newest</option>
</select>

<script>
export default {
  props:["filterList", "slider", "sliderX", "sortType"],
  components: { vueSlider },
  computed: {
    localSortType: {
      get() {
        return this.sortType;
      },
      set(newVal) {
        this.$emit('update:sortType', newVal);
      }
    }
  }
}
</script>

根组件调整： #

用.sync修饰符简化双向绑定逻辑：

<app-toprow 
  :sortType.sync="sortType" 
  :filterList="filterList" 
  :slider="slider" 
  :sliderX="sliderX"
></app-toprow>

3. 额外优化建议 #

你的根组件filterList计算属性中的排序逻辑可以简化，用对象映射排序规则，让代码更易维护：

computed: {
  filterList: function () {
    let filteredStates = this.api.filter((estate) => {
      return (this.keyword.length === 0 || estate.address.includes(this.keyword)) && 
             (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) && 
             (this.regions.length === 0 || this.regions.includes(estate.region));
    });

    // 用对象映射排序规则，新增排序类型只需添加新的键值对
    const sortRules = {
      price: (prev, curr) => prev.price - curr.price,
      created_at: (prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at)
    };

    if (sortRules[this.sortType]) {
      filteredStates.sort(sortRules[this.sortType]);
    }

    return filteredStates;
  },
}

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