vue3中 子组件有个el-selection 如何让子组件初始化默认展示父组件传的值 然后进行选折的时候搜索框展示选中的值

在Vue3中，可以使用`v-model`指令来实现子组件与父组件之间的双向数据绑定，从而实现子组件初始化默认展示父组件传递的值，并在选中值发生变化时，搜索框展示选中的值。具体实现步骤如下：

1.在父组件中定义一个名为`selectedValue`的`ref`对象，并将其作为子组件的`v-model`绑定值传递给子组件。

2.在子组件中使用`props`接收`selectedValue`，并将其作为`el-select`的`modelValue`绑定值。

3.在`el-select`中使用`v-model`绑定`modelValue`属性，并设置`filterable`为`true`，以启用搜索框。

这样，在子组件中就可以通过`modelValue`属性来控制`el-select`的选中值，并且在选中值发生变化时，搜索框也会展示选中的值。示例代码如下：

父组件代码：

<template>
  <div>
    <ChildComponent v-model="selectedValue" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const selectedValue = ref('默认选中值');

    return {
      selectedValue
    };
  }
};
</script>

子组件代码：

<template>
  <div>
    <el-select v-model="modelValue" filterable>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    };
  }
};
</script>

需要注意的是，在使用`v-model`时，父组件中的`v-model`绑定值会被转换为`modelValue`属性传递给子组件，因此在子组件中需要使用`modelValue`属性来控制`el-select`的选中值。