vuejs2 - Vue.js 2 - 组件上的 v-model

Question

我有以下组件:

Vue.component('test-component',{ 

    template: `<div>
        {{value}}
        <button on:click="updateValue();">update</button>
    </div>`,

    props: ['value'],

    methods: {
        updateValue(){
            this.$emit('input', this.value + "X");
        }
    }
});

实例化如下，(绑定(bind)到一个数据变量'testValue):

<test-component v-model="testValue"></test-component>

该代码旨在在单击按钮时在绑定(bind)值的末尾添加一个“X”。

我的意图是创建一个可重用的组件，该组件可以绑定(bind)到其封闭组件中的数据，例如，为了创建自定义表单输入。

它不起作用 - emit 似乎没有做任何事情。我做错了什么？

Answer 1

您需要使用 v-on而不仅仅是下一行中的 on，这会将 vue 方法绑定(bind)到按钮:

template: `<div>
    {{value}}
    <button v-on:click="updateValue();">update</button>
</div>`,

工作 fiddle .