如何在子组件中过滤道具后更新父数据？

// 父组件
<template>
  <div>
    <child-component @filterProps="updateProps"></child-component>
    <div v-for="prop in props" :key="prop.id">{{ prop.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: [] // 存储道具的数组
    };
  },
  methods: {
    updateProps(filteredProps) {
      this.props = filteredProps; // 更新父组件的道具数据
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <button @click="filterProps">过滤道具</button>
  </div>
</template>

<script>
export default {
  methods: {
    filterProps() {
      // 过滤道具的逻辑
      const filteredProps = this.props.filter(prop => prop.type === 'weapon');
      this.$emit('filterProps', filteredProps); // 将过滤后的道具数据传递给父组件
    }
  }
};
</script>