vue 实现切换门店 重置子组件的数据

实现切换门店并重置子组件的数据可以通过以下步骤实现：

1. 在父组件中定义一个 `selectedStore` 变量，用于存储当前选择的门店。
2. 在切换门店时，更新 `selectedStore` 变量的值，并将其传递给子组件。
3. 在子组件中使用 `watch` 监听 `selectedStore` 变量的变化，当变化时，执行重置子组件数据的操作。

具体实现如下：

父组件：

<template>
  <div>
    <select v-model="selectedStore" @change="onChangeStore">
      <option v-for="store in stores" :value="store">{{ store.name }}</option>
    </select>
    <child-component :store="selectedStore" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      stores: [
        { id: 1, name: 'Store A' },
        { id: 2, name: 'Store B' },
        { id: 3, name: 'Store C' },
      ],
      selectedStore: null,
    };
  },
  methods: {
    onChangeStore() {
      // 切换门店
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>当前门店：{{ store.name }}</p>
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  props: {
    store: {
      type: Object,
      required: true,
    },
  },
  watch: {
    store: {
      immediate: true, // 立即执行一次
      handler() {
        // 重置子组件数据
      },
    },
  },
};
</script>

在子组件中使用 `watch` 监听 `store` 变量的变化，当变化时，执行重置子组件数据的操作。由于 `immediate` 属性设置为 true，因此在子组件创建时会立即执行一次。