vue子组件和父组件之间如何实时传值 ，我做一个多选框，点击查询以后，子组件的选项消失

在Vue.js中，子组件和父组件之间的实时传值通常通过props和事件(emit)配合来实现。假设你有一个多选框组件作为子组件，你想让父组件控制其选项：

1. **父组件向子组件传递数据**:
父组件可以将需要传递给子组件的数据作为prop传入。创建一个名为`options`的对象数组，并在组件的`data`属性中声明。

<template>
  <child-component :options="filteredOptions" @queryChange="handleQueryChange"></child-component>
</template>

<script>
export default {
  data() {
    return {
      options: [
        // ... 初始化的选项列表
      ],
      filteredOptions: [], // 初始默认显示所有选项
    };
  },
  methods: {
    handleQueryChange(newOptions) {
      this.filteredOptions = newOptions;
    }
  }
};
</script>

在这个例子中，`:options`是v-bind绑定，`@queryChange`是v-on监听事件。

2. **子组件接收并处理父组件的数据**:
子组件在接收到`options`后，可以在模板中展示它们，并添加一个方法响应用户的选择。当多选框状态改变时，使用`$emit`触发`queryChange`事件，将新的选项传回给父组件。

<template>
  <div>
    <ul v-for="(option, index) in options" :key="index">
      <li>
        <input type="checkbox" v-model="selectedItems[index]" />
        {{ option.text }}
      </li>
    </ul>
    <button @click="handleQuery">查询</button>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
  },
  data() {
    return {
      selectedItems: Array(options.length).fill(false), // 初始状态设为未选中
    };
  },
  methods: {
    handleQuery() {
      const newOptions = this.selectedItems.map((selected, i) => (selected ? this.options[i] : undefined));
      this.$emit('queryChange', newOptions);
    }
  }
};
</script>

当父组件接收到`queryChange`事件时，它可以根据新传来的选项更新`filteredOptions`，从而达到子组件选择消失的效果。