“模型”属性似乎什么也做不了

Question

我用一个简单的单选按钮功能叉了一把小提琴，并对它做了一些改动。正如您在这把小提琴中所看到的，它工作得很完美。

​

Vue.component('radio-button', {
    props: ['id', 'value'],
    template: `
    <label class="radio">
        <input type="radio" :value="id" v-model="radioButtonValue">
        <span>{{ id }}</span>
    </label>
    `,
    computed: {
        radioButtonValue: {
            get: function() {
                return this.value;
            },
            set: function() {
                this.$emit("input", this.id);
            }
        }
    }
});

Vue.component('example-form', {
    template: `
        <div>
            <radio-button id="1" v-model="selectedValue"/>
            <radio-button id="2" v-model="selectedValue"/>
            <radio-button id="3" v-model="selectedValue"/>
            <div class="result">
                Radio button selection: {{selectedValue}}
            </div>
        </div>
    `,
    data: function() {
        return {
            selectedValue: null
        };
    }
});

new Vue({
    el: '#my-app',
    template: `<example-form></example-form>`
});

<script src="https://unpkg.com/vue@2.0.4/dist/vue.js"></script>
<div id="my-app"></div>

​

但是，它似乎只在单选按钮组件中发出的事件是input时才能工作。

例如，如果我想通过使用model属性来使用不同的值名称("myvar")和自定义事件名("foobar")，那么它根本无法工作：

​

Vue.component('radio-button', {
    props: ['id', 'myval'],
    model: {
        prop: 'myval',
        event: 'foobar'
    },
    template: `
    <label class="radio">
        <input type="radio" :value="id" v-model="radioButtonValue">
        <span>{{ id }}</span>
    </label>
    `,
    computed: {
        radioButtonValue: {
            get: function() {
                return this.myval;
            },
            set: function() {
                this.$emit("foobar", this.id);
            }
        }
    }
});

Vue.component('example-form', {
    template: `
        <div>
            <radio-button id="1" v-model="selectedValue"/>
            <radio-button id="2" v-model="selectedValue"/>
            <radio-button id="3" v-model="selectedValue"/>
            <div class="result">
                Radio button selection: {{selectedValue}}
            </div>
        </div>
    `,
    data: function() {
        return {
            selectedValue: null
        };
    }
});

new Vue({
    el: '#my-app',
    template: `<example-form></example-form>`
});

<script src="https://unpkg.com/vue@2.0.4/dist/vue.js"></script>
<div id="my-app"></div>

​

model属性的作用是它指定：

<radio-button id="1" v-model="selectedValue"/>

被“翻译”为：

<radio-button id="1" :myvar="selectedValue" @foobar="selectedValue = $event"/>

而不是默认的：

<radio-button id="1" :value="selectedValue" @input="selectedValue = $event"/>

是那么回事吗？

我是不是漏掉了什么，还是这是Vue的一个bug？

Answer 1

你所描述的是v模型是如何工作的。

v-model="anything"是:value="anything" @input="anything = $event"的缩写。因此，除非您遵循接受值支持和发出输入事件的约定，否则父组件将无法工作。

第一个示例工作的原因是您的单选按钮组件接受一个值支柱并发出一个输入。

因此，在这种情况下，您有两个选项，在单选按钮组件中遵循v-model的约定，或者做一些自定义的事情，传递任何道具名称并发出任何事件。