Question

我用简单的单选按钮功能创建了一个小提琴，然后对其进行了一些更改。如您在this fiddle中所见，它运行完美：

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中的错误吗？

Answer 1

您要描述的是v模型的工作原理

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

您的第一个示例起作用的原因是，您的单选按钮组件接受一个值prop并发出输入

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

`model`属性似乎无能为力

1 个答案: