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

Question

我想不通。我有一个组件StockSearch.vue，在这个组件中我有另一个名为StockSearchSelect.vue的组件。代码如下。

当在StockSerchSelect组件中更改所选选项时，我想更改StockSearch中对象内的selected值。我该怎么做呢？makes

股票搜索.vue

<template>

    <div class="flex flex-col lg:flex-row">
        <search-select title="Make" :options="data.makes"></search-select>
        <search-select title="Model" :options="data.makes"></search-select>
        <search-select title="Variant" :options="data.makes"></search-select>
        <search-select title="Trim" :options="data.makes"></search-select>
        <search-select title="Bodystyle" :options="data.makes"></search-select>
        <search-select title="Transmission" :options="data.makes"></search-select>
        <search-select title="Doors" :options="data.makes"></search-select>      
    </div>

</template>
<script>
import SearchSelect from './StockSearchSelect';
export default {
    components: {
        SearchSelect
    },
    data: function() {
        return {
            data: {
                makes: {
                    options: [
                        { code: 1, display: 'Audi' },
                        { code: 2, display: 'BMW' },
                        { code: 3, display: 'Chevrolet' },
                        { code: 4, display: 'Mercedes Benz' },
                        { code: 5, display: 'Suzuki' },
                        { code: 6, display: 'Volvo' },
                        { code: 7, display: 'Lamborghini' },
                        { code: 8, display: 'Citron' },
                        { code: 9, display: 'Jeep' },
                    ],
                    selected: null
                }
            }
        }
    },
    watch: {
        data: {
            deep: true,
            handler: function(data) {
                console.log(data);

            }
        }
    }
}
</script>

StockSearchSelect.vue

<template>
    <div class="w-full p-2">
        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">{{ title }}</label>
        <div class="relative">
            <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">
                <option value="">Any {{ title }}</option>
                <option v-for="(value, index) in data.options" :key="index" :value="value.code">{{ value.display }}</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: String,
        options: Array,
        selected: Int
    },
    data: function() {
        return {
            selected: null
        }
    },
    watch: {
        selected: function(value) {

        }
    }
}
</script>

标签： javascriptvue.js

Answer 1

如果您只想makes在选项更改时更新对象，您需要做的就是$emit在值更改时触发一个事件，然后在父组件中监听该事件。您可能应该阅读道具和自定义事件文档。

您可以更改以下选择以包括@input='$emit("selected", $event.target.value)'

<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>

然后添加@selected="data.makes.selected = $event"到下面的组件中。

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

我还在下面添加了一个工作片段，以防万一。

Vue.component("my-select", {
  template: "<select @input='$emit(`selected`, $event.target.value)'><option selected>Please Select</option><option value='1'>1</option><option value='2'>2</option></select>"

});

new Vue({
  el: "#app",
  data: () => {
    return {
      selectedValue: null
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <my-select @selected="selectedValue = $event"></my-select>
    {{selectedValue}}
  </div>
</div>