Javascript 设置一个'；默认值'；Vue内组件的v-on事件

我有一组“文本输入”自定义组件，其中包含一些样板标记和一个“输入”元素

将“文本输入”的值输入到其父级的一种方法是在值发生更改时$emit一个事件

我需要为每个文本输入组件捕获并处理带有v-on的$emit：

<text-input v-on:valueUpdated="storeInputValue" name='name'></text-input>
<text-input v-on:valueUpdated="storeInputValue" name='email'></text-input>
<text-input v-on:valueUpdated="storeInputValue" name='phone'></text-input>

我觉得这在代码中引入了太多的重复，我想知道是否有一种方法可以将v-on侦听器放在组件模板本身上：

<template v-on:valueUpdated="storeInputValue">
    ...
</template>

...

因此，每次使用此组件时，都会有一个“默认”v-on侦听器。

您可以在自定义组件上使用

html

<div id="app>
    <text-input v-model="user.name" name="'name'"></text-input>
    <text-input v-model="user.email" name="'email'"></text-input>
    <text-input v-model="user.phone" name="'phone'"></text-input>
    <h4>{{user}}</h4>
</div> 

---

storeInputValue

具体做什么？每个组件的实现是相同的，还是您需要知道哪个特定组件发出了它？为什么不让

使用它呢？我需要知道发出它的组件以及值。storeInputValue将该值存储在父数据对象中。

Vue.component('text-input', {
        name: 'text-input',
        template: `
        <div>
            <label>{{name}}</label>
            <input type="text" :value="value" @input="storeInputValue($event.target.value)" />
        </div>
        `,
        props: ['value', 'name'],
        methods: {
            storeInputValue(value){
                this.$emit('input', value);
            }
        }
    });

    //parent component
    new Vue({
        el: '#app',
        data: {
            user: {
                name: '',
                email: '',
                phone: ''
            }
        }
    });