Javascript Vue：将选择值从组件返回到父组件

我想不出来。我有一个组件StockSearch.vue，在这个组件中我有另一个组件StockSearchSelect.vue。代码如下

当StockSerchSelect组件中的选定选项发生更改时，我希望在StockSearch中的Make对象中更改选定值。我该怎么做

StockSearch.vue

从“/StockSearchSelect”导入SearchSelect； 导出默认值{ 组成部分：{ 搜索选择 }, 数据：函数{ 返回{ 数据：{ 使：{ 选项：[ {代码：1，显示：'Audi'}， {代码：2，显示：'BMW'}， {代码：3，显示：'雪佛兰'}， {代码：4，显示：'梅赛德斯-奔驰'}， {代码：5，显示：'铃木'}， {代码：6，显示：'Volvo'}， {代码：7，显示：'兰博基尼'}， {代码：8，显示：'Citron'}， {代码：9，显示：'Jeep'}， ], 所选：空 } } } }, 观察：{ 数据：{ 深：是的， 处理程序：functiondata{ 控制台日志数据； } } } } StockSearchSelect.vue

{{title}} 任何{{title} {{value.display} 导出默认值{ 道具：{ 标题：字符串， 选项：阵列， 选定：Int }, 数据：函数{ 返回{ 所选：空 } }, 观察：{ 所选：函数值{ } } }

---

如果只希望在更改选项时更新make对象，则只需在值更改时$emit一个事件，然后在父组件中侦听该事件。您可能应该阅读文档和文档

您可以将下面的选择更改为包含@input='$emitselected$event.target.value'

我还在下面添加了一个工作片段，以防有所帮助

Vue.componentmy-select{ 模板：请选择12 }; 新Vue{ el:应用程序， 数据：=>{ 返回{ selectedValue:空 } } }; {{selectedValue}}

<select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state" v-model="selected" @input='$emit("selected", $event.target.value)'>
    <option value="">Any {{ title }}</option>
    <option v-for="(value, index) in data.options" :key="index" :value="value.code">{{ value.display }}</option>
</select>

<search-select title="Doors" :options="data.makes" @selected="data.makes.selected = $event"></search-select>