Vue父子组件数据传递疑问：props-down/event-up模式下的交互实现

Great job getting the child-to-parent communication working with the state-selected event! Let's extend that with Vue's props-down pattern to connect your parent filter buttons to the state select child component—this fits perfectly with the pattern you're already using.

Step 1: Track Filter State & Pass Filtered Data from Parent #

First, add a data property in your parent component to track the active filter (e.g., "new" or "completed" orders). Then, compute the filtered list of states based on this filter, and pass it to the child via props. You can also sync the selected state if you need to reset it when the filter changes.

<!-- Parent Component -->
<template>
  <div class="order-dashboard">
    <!-- Filter Buttons -->
    <button 
      @click="currentFilter = 'all'"
      :class="{ active: currentFilter === 'all' }"
    >
      All Orders
    </button>
    <button 
      @click="currentFilter = 'new'"
      :class="{ active: currentFilter === 'new' }"
    >
      New Orders
    </button>
    <button 
      @click="currentFilter = 'completed'"
      :class="{ active: currentFilter === 'completed' }"
    >
      Completed Orders
    </button>

    <!-- State Select Child Component -->
    <state-select
      :available-states="filteredStates"
      :selected-state="activeState"
      @state-selected="handleStateSelection"
    />
  </div>
</template>

<script>
import StateSelect from './StateSelect.vue';

export default {
  components: { StateSelect },
  data() {
    return {
      currentFilter: 'all', // Default filter
      activeState: null,
      allUSStates: [/* Your full list of US states (objects with code/name) */],
      orders: [/* Your full order dataset */]
    };
  },
  computed: {
    filteredStates() {
      // Return all states if no filter is active
      if (this.currentFilter === 'all') return this.allUSStates;

      // Filter states to only those that have orders matching the active filter
      const relevantStateCodes = [...new Set(
        this.orders
          .filter(order => order.status === this.currentFilter)
          .map(order => order.stateCode)
      )];

      return this.allUSStates.filter(state => relevantStateCodes.includes(state.code));
    }
  },
  methods: {
    handleStateSelection(selectedState) {
      this.activeState = selectedState;
      // Your existing logic for when a state is selected (e.g., filter orders by state)
    }
  },
  watch: {
    // Optional: Reset selected state if it's no longer in the filtered list
    currentFilter() {
      if (this.activeState && !this.filteredStates.some(s => s.code === this.activeState.code)) {
        this.activeState = null;
      }
    }
  }
};
</script>

Step 2: Update Child Component to Accept Props #

Modify your state-select child component to accept the props from the parent, and use them to render the dynamic list of states and sync the selected value.

<!-- Child Component (StateSelect.vue) -->
<template>
  <select 
    @change="emitStateSelection"
    :value="selectedState?.code || ''"
  >
    <option value="">Select a State</option>
    <option 
      v-for="state in availableStates"
      :key="state.code"
      :value="state.code"
    >
      {{ state.name }}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    availableStates: {
      type: Array,
      required: true,
      default: () => []
    },
    selectedState: {
      type: Object,
      default: null
    }
  },
  methods: {
    emitStateSelection(event) {
      const selectedState = this.availableStates.find(s => s.code === event.target.value);
      this.$emit('state-selected', selectedState);
    }
  }
};
</script>

Key Notes #

• We're sticking strictly to Vue's props-down, events-up pattern: parent passes data (filtered states, selected state) via props; child emits events when the user interacts with the select box.
• The computed filteredStates property in the parent keeps your data logic centralized, so the child only needs to render what's passed to it.
• The optional watcher in the parent ensures the selected state doesn't stay set to a state that's no longer available under the active filter.

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