javascript - Vue.js 2.x 选择内部组件未获取值

Question

我试图记住如何从组件中返回选择中的值。

尽管我打赌很容易，但我忘记了或者我只是做错了。

我调用该组件:

<custom-select :options="options" v-model="selectedMain"></custom-select>

然后我就有了组件本身:

<template>
    <fieldset class="form-group">
        <select v-model="selected" 
                id="something" 
                name="something">
            <option :value="null">Select an option</option>
            <option v-for="option in options" 
                    value="option.id"
                    v-html="option.name"></option>
        </select>
    </fieldset>
</template>
<script>
    module.exports = {
        props: [ 'options' ],
        data: function() {
            return {
                selected: null
            }
        }
    }
</script>

这当然是在我的主 Vue 实例中定义的，并且渲染正常:

new Vue({
    ...
    data: function() {
        return {
            ...
            selectedMain: null
            ...
        }
    },
    ...
})

但是，当我从下拉列表中将值更改为 1(例如)时，我可以在 Vue 调试器工具栏中看到:

<Root>
    selectedMain: null
    <CustomSelect>
        selected: 1
    </CustomSelect>
</Root>

编辑1:我认为这几乎是同一件事:

Vue.component('custom-select', {
  data () {
    return {
      selected: null
    }
  },
  props: [ 'options' ],
  template: `<fieldset class="form-group">
        <select v-model="selected"
                id="something"
                name="something">
            <option :value="null">Select an option</option>
            <option v-for="option in options"
                    value="option.id"
                    v-html="option.name"></option>
        </select>
    </fieldset>`
});

new Vue({
  el: '#app',
  data: function() {
    return {
      options: [
        { id: 1, name: "First option" },
        { id: 2, name: "Second option" },
        { id: 3, name: "Third option" },
      ],
      selectedMain: null
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <custom-select :options="options" v-model="selectedMain"></custom-select>
  <p>Selected Main: {{ selectedMain }}</p>
</div>

因此我显然希望selectedMain采用selected值。

如何实现这一目标？如有任何建议，我们将不胜感激。

Answer 1

您需要使自己的组件能够发出变化并绑定(bind)值。默认情况下，v-model 绑定(bind)到 :value 和 @change 以及 @input 事件，但您可以对其进行自定义。

在自定义选择组件中，您需要类似以下内容:

module.exports = {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: [ 'options', 'value' ],
    data: function() {
        return {
            internal: null
        }
    },
    computed: {
        selected: {
            get() { return this.internal },
            set(val) {
               this.$emit('change', val)
            }
        }
    }
    watch: {
        value(newVal) {
            this.internal = newVal
        }
    }

}

如果它像上面的代码一样简单(但我对此表示怀疑)，那么实现甚至可以更简单(全部在模板中完成):

https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Vue.component('base-checkbox', {
model: {
    prop: 'checked',
    event: 'change'
},
props: {
    checked: Boolean
},
template: `
    <input
    type="checkbox"
    v-bind:checked="checked"
    v-on:change="$emit('change', $event.target.checked)"
    >
`
})

您将在父模板中使用它:

<base-checkbox v-model="lovingVue"></base-checkbox>