插槽子组件数据修改的正确方式及表格排序指示器修复

核心思路 #

插槽内组件无法直接用$emit触发Table组件的事件，也不能直接修改props，此时可以通过向插槽传递回调函数的方式，让表头组件调用回调通知Table组件更新排序状态，同步到排序指示器的显示逻辑中。

具体实现步骤 #

1. Table组件定义回调并传递给插槽 #

在Table组件模板中，给表头插槽传入updateSort回调，同时把当前排序状态（sortKey、sortOrder）也传给插槽，让表头能根据状态渲染指示器：

<!-- Table.vue -->
<template>
  <div class="table-container">
    <div class="table-header">
      <slot 
        name="header" 
        :sortKey="sortKey" 
        :sortOrder="sortOrder" 
        :updateSort="updateSort"
      ></slot>
    </div>
    <div class="table-body">
      <!-- 数据行渲染逻辑（保留你已实现的部分） -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Object,
      default: () => ({ key: '', order: 'asc' })
    }
  },
  computed: {
    sortKey: {
      get() { return this.modelValue.key },
      set(val) { this.$emit('update:modelValue', { ...this.modelValue, key: val }) }
    },
    sortOrder: {
      get() { return this.modelValue.order },
      set(val) { this.$emit('update:modelValue', { ...this.modelValue, order: val }) }
    }
  },
  methods: {
    updateSort(key) {
      // 复用你已实现的排序逻辑
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortKey = key
        this.sortOrder = 'asc'
      }
      // 这里触发数据排序（保留你已实现的代码）
    }
  }
}
</script>

2. 父组件插槽内接收参数并调用回调 #

父组件使用Table时，在表头插槽中解构出sortKey、sortOrder和updateSort，点击表头时调用回调，同时根据当前状态显示排序指示器：

<!-- Parent.vue -->
<template>
  <Table v-model="tableSort">
    <template #header="{ sortKey, sortOrder, updateSort }">
      <div class="header-cell" @click="updateSort('name')">
        姓名
        <span v-if="sortKey === 'name'">
          {{ sortOrder === 'asc' ? '↑' : '↓' }}
        </span>
      </div>
      <div class="header-cell" @click="updateSort('age')">
        年龄
        <span v-if="sortKey === 'age'">
          {{ sortOrder === 'asc' ? '↑' : '↓' }}
        </span>
      </div>
    </template>
  </Table>
</template>

<script>
export default {
  data() {
    return {
      tableSort: { key: '', order: 'asc' }
    }
  }
}
</script>

3. 错误原因说明 #

你之前遇到的parent is null报错，是因为直接在插槽内修改props或非法访问父组件实例导致的。上述方案完全遵循Vue单向数据流规则：通过回调传递状态变更请求，由Table组件内部通过$emit更新props，不会触发这类错误。

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